JavaScript在部分視圖MVC中失敗

Question

我有一個帶有標簽控件的MVC 5視圖。 我有以下觀點

@using System.Collections
@using MyComp.Content.Text;
@using MyComp.Utilities;
@using System.Linq;
@model MyComp.Models.ViewModels.AdministratorViewModel

<style type="text/css">
    ...
</style>

<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-2.0.0.js"></script>

<div class="manage">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#invite">
                <span class="glyphicon glyphicon-inbox"></span>Invite
            </a>
        </li>
        <li>
            <a data-toggle="tab" href="#custom_invite">
                <span class="glyphicon glyphicon-pencil"></span>Custom Invite
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="invite" class="tab-pane active fade in">
            @Html.Partial("_InvitePartial", Model)
        </div>
        <div id="custom_invite" class="htmlCode tab-pane fade">
            @Html.Partial("_CustomInvitePartial", Model)
        </div>
    </div>
</div>
@section scripts {
    <script>
        function onSuccess(result) {
            $('#notify_failure_message').html(result.notify_failure);
            $('#notify_success_message').html(result.notify_success);
        }
    </script>
    <script>
        $(function () {
            $("input[type=button]").click(function () {
                var data_email = $('#email').val();
                var data_product = $('#product option:selected').text();
                $.ajax({
                    url: 'Tools/SendInvite',
                    type: 'POST',
                    data: { email: data_email, product: data_product },
                    success: function (result) {
                        $('#fail_message').html(result.result_failure);
                        $('#success_message').html(result.result_success);
                    }
                });
            });
        });
    </script>
}

而我的部分看法是

@using System.Collections
@using MyComp.Content.Text;
@using MyComp.Utilities;
@using System.Linq;
@model MyComp.Models.ViewModels.AdministratorViewModel

@using (Html.BeginForm("SendInvite", "Tools", FormMethod.Post,
    new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h2>Invite Users</h2>
    <div class="form-group">
        @Html.LabelFor(m => m.EmailAddress, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.EmailAddress,
                new { @class = "form-control", id = "email" })
            @Html.ValidationMessageFor(m => m.EmailAddress)
        </div>
    </div>
    <div class="form-group">
        @Html.Label("Access To", new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.DropDownList("Product", new SelectList(
                new List<Object> {
                    new { Text = "ProcuctA", Value = "ProcuctA" },
                    new { Text = "ProcuctB", Value = "ProcuctB" },
                    new { Text = "All", Value = "All" }},
                    "Value",
                    "Text"),
                    new { @class = "form-control", id = "product" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <span id="fail_message" class="label label-danger"></span>
            <span id="success_message" class="label label-success"></span>
            @*<p class="text-info">Test Message</p>*@
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" id="invite_button" value="Invite User" class="btn btn-primary" />
        </div>
    </div>
}

我的按鈕id="invite_button"不會觸發控制器方法。 當我將所有內容都放在一個視圖中時，它確實啟動了，並且一切都很好，它使用的是相同的Java腳本，為什么當我移到局部視圖時，它停止了工作？

謝謝你的時間。

---

編輯。 我主持部分視圖的主要觀點是

@using System.Collections
@using VisasysNET.Content.Text;
@using VisasysNET.Utilities;
@using System.Linq;
@model VisasysNET.Models.ViewModels.AdministratorViewModel

<style type="text/css">
    span {
        padding-right: 10px;
    }
    ...
</style>

<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-2.0.0.js"></script>

<div class="manage">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active">
            <a data-toggle="tab" href="#invite">
                <span class="glyphicon glyphicon-inbox"></span>Invite
            </a>
        </li>
        <li>
            <a data-toggle="tab" href="#custom_invite">
                <span class="glyphicon glyphicon-pencil"></span>Custom Invite
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="invite" class="tab-pane active fade in">
            @Html.Partial("_InvitePartial", Model)
        </div>
        <div id="custom_invite" class="htmlCode tab-pane fade">
            @Html.Partial("_CustomInvitePartial", Model)
        </div>
    </div>
</div>
@section scripts {
    <script>
        function onSuccess(result) {
            $('#notify_failure_message').html(result.notify_failure);
            $('#notify_success_message').html(result.notify_success);
        }
    </script>
    <script>
        $(function () {
            $("input[type=button]").click(function () {
                var data_email = $('#email').val();
                var data_product = $('#product option:selected').text();
                $.ajax({
                    url: 'Tools/SendInvite',
                    type: 'POST',
                    data: { email: data_email, product: data_product },
                    success: function (result) {
                        $('#fail_message').html(result.result_failure);
                        $('#success_message').html(result.result_success);
                    }
                });
            });
        });
    </script>
}

Answer 1

section的不能在部分視圖中使用，

看這里：

使用Razor View Engine從局部視圖ASP.NET MVC 3將內容注入特定部分

Answer 2

Invitation_button沒有引用它的任何JavaScript。 也不是類型的提交 。 此按鈕將始終不執行任何操作。

您似乎希望它的類型為Submit 。

<input type="submit" id="invite_button" value="Invite User" class="btn btn-primary" />

Answer 3

嘗試將輸入按鈕的類型從“提交”更改為“按鈕”-它將起作用。 下面是代碼。 這是MVC索引視圖

<script type="text/javascript">   

    $(document).ready(function () {
        $("input[type=button]").click(function () {
            alert("hello from partial class");
        });
    });

</script>

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>
<div>
    @Html.Partial("~/Views/Home/_MyTest.cshtml")

這里是局部視圖

@{
    ViewBag.Title = "_MyTest";
}

<div>
    <input type="button" id="invite_button" value="Invite User"/>
</div>

因此，單擊按鈕，我就可以進行jquery並警告彈出窗口了

希望這可以幫助..

Answer 4

您需要在布局視圖中呈現腳本。

<body>
   <!-- Other Code -->
   @RenderSection("scripts", required: false)
</body>