[英]JavaScript Failing in Partial View MVC
我有一个带有标签控件的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>
}
Invitation_button没有引用它的任何JavaScript。 也不是类型的提交 。 此按钮将始终不执行任何操作。
您似乎希望它的类型为Submit 。
<input type="submit" id="invite_button" value="Invite User" class="btn btn-primary" />
尝试将输入按钮的类型从“提交”更改为“按钮”-它将起作用。 下面是代码。 这是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.