JavaScript在Partial View MVC中失败
本文关键字:失败 MVC View Partial JavaScript | 更新日期: 2023-09-27 18:10:07
我有一个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>
}
section
's不能在局部视图中工作,
看到:
将内容从分部视图注入到特定的节中。. NET MVC 3 with Razor View Engine
invite_button没有任何javascript引用它。它也不是类型submit。这个按钮永远不会起任何作用。
看起来你希望它的类型是submit
<input type="submit" id="invite_button" value="Invite User" class="btn btn-primary" />
尝试修改输入按钮类型从submit to button -它会工作。我在一个示例应用程序中尝试了警报,它起作用了。给我。下面是代码。这是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并弹出警告
您需要在布局视图中呈现脚本。
<body>
<!-- Other Code -->
@RenderSection("scripts", required: false)
</body>