[英]JavaScript Failing in Partial View MVC
I had a MVC 5 view which has a tab control. 我有一个带有标签控件的MVC 5视图。 I have the following view
我有以下观点
@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>
}
and my partial view as 而我的部分看法是
@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>
}
Bu my button id="invite_button"
won't fire the controller method. 我的按钮
id="invite_button"
不会触发控制器方法。 When I had everything in a single view it did fire and all was fine, this was using the same java script, why has this stopped working when I have moved to a partial view? 当我将所有内容都放在一个视图中时,它确实启动了,并且一切都很好,它使用的是相同的Java脚本,为什么当我移到局部视图时,它停止了工作?
Thanks for your time. 谢谢你的时间。
Edit. 编辑。 my main view that hosts the partial views is
我主持部分视图的主要观点是
@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 do not work within partial views, section
的不能在部分视图中使用,
see here: 看这里:
Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine 使用Razor View Engine从局部视图ASP.NET MVC 3将内容注入特定部分
invite_button does not have any javascript referencing it. Invitation_button没有引用它的任何JavaScript。 Neither is it of type submit .
也不是类型的提交 。 This button will always do nothing.
此按钮将始终不执行任何操作。
It looks like you expect it to be of type submit . 您似乎希望它的类型为Submit 。
<input type="submit" id="invite_button" value="Invite User" class="btn btn-primary" />
Try modifying the input button type from submit to button - it will work.. I tried with alert in a sample application and it worked.. for me. 尝试将输入按钮的类型从“提交”更改为“按钮”-它将起作用。 Below is the code.
下面是代码。 Here's the MVC index view
这是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")
and here the partial view 这里是局部视图
@{
ViewBag.Title = "_MyTest";
}
<div>
<input type="button" id="invite_button" value="Invite User"/>
</div>
So on click on the button I am able to the jquery and alert popup's up 因此,单击按钮,我就可以进行jquery并警告弹出窗口了
hope this helps.. 希望这可以帮助..
you need to render scripts in your layout view. 您需要在布局视图中呈现脚本。
<body>
<!-- Other Code -->
@RenderSection("scripts", required: false)
</body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.