Mvc ajax怪异的行为 [英] Mvc ajax weird behaviour
问题描述
我是网络编程的新手，我正在尝试将Ajax与MVC示例作为示例项目。
过滤记录从组合框中选择值，但获取重复列表而不是在相同的html中过滤表。
这是控制器
I'm new to web programming and I'm trying Ajax with MVC example as a sample project.
Filtering record On selecting value from combobox, but getting duplicate list instead of filtering in same html table.
This is Controller
public class TestController : Controller
{
private readonly User[] userData =
{
new User {FirstName = "Edy", LastName = "Clooney", Role = Role.Admin},
new User {FirstName = "David", LastName = "Sanderson", Role = Role.Admin},
new User {FirstName = "Pandy", LastName = "Griffyth", Role = Role.Normal},
new User {FirstName = "Joe", LastName = "Gubbins", Role = Role.Normal},
new User {FirstName = "Mike", LastName = "Smith", Role = Role.Guest}
};
public PartialViewResult GetUserData(string selectedRole = "All")
{
IEnumerable data = userData;
if (selectedRole != "All")
{
var selected = (Role)Enum.Parse(typeof(Role), selectedRole);
data = userData.Where(p => p.Role == selected);
}
return PartialView(data);
}
public ActionResult GetUser(string selectedRole = "All")
{
return View((object)selectedRole);
}
}
这是查看GetUser.cshtml.cshtml
This is view GetUser.cshtml.cshtml
@using SampleMVC.Models
@model string
@{
ViewBag.Title = "GetUser";
AjaxOptions ajaxOpts = new AjaxOptions
{
UpdateTargetId = "tableBody",
OnBegin = "function1"
};
}
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
function function1() {
$("#textbox1").text("function 1 called again");
}
</script>
<h2>Get User</h2>
<table id="maintable">
<thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
<tbody id="tableBody">
@Html.Action("GetUserData", new { selectedRole = Model })
</tbody>
</table>
<div id="textbox1">123</div>
@using (Ajax.BeginForm("GetUser", ajaxOpts))
{
<div>
@Html.DropDownList("selectedRole", new SelectList(
new[] { "All" }.Concat(Enum.GetNames(typeof(Role)))))
<button type="submit">Submit</button>
</div>
}
这是局部视图GetUserData.cshtml
This is partial view GetUserData.cshtml
@model IEnumerable<SampleMVC.Models.User>
<table id="PartialTable">
<tr>
<th>
@Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
@Html.DisplayNameFor(model => model.LastName)
</th>
<th>
@Html.DisplayNameFor(model => model.BirthDate)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.BirthDate)
</td>
<td></td>
</tr>
}
</table>
什么我试图实现的是，在选择更改组合框时，表格值应该被过滤，而带有id = textbox1的Div标签应该显示在function1（）中提到的值。
我尝试了什么：
如果我替换了我的GetUser.cshtml视图，那么它工作正常并使用过滤值更新表。但是当我如上所述修改它时，它的行为并不相同。
What I'm trying to achieve is, on selection change of combo box table values should get filtered and Div tag with id=textbox1 should display value as mentioned in function1().
What I have tried:
If i replace my GetUser.cshtml view then it's working fine and updating the table with filtered values. But it doesn't behave same when I modify it as mentioned above.
@using SampleMVC.Models
@model string
@{
ViewBag.Title = "GetUser";
AjaxOptions ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody"
};
}
<h2>Get User</h2>
<table>
<thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
<tbody id="tableBody">
@Html.Action("GetUserData", new {selectedRole = Model })
</tbody>
</table>
@using (Ajax.BeginForm("GetUser", ajaxOpts)) {
<div>
@Html.DropDownList("selectedRole", new SelectList(
new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
<button type="submit">Submit</button>
</div>
}
推荐答案
（＃textbox1）。text（函数1再次调用）;
}
< / script>
< h2>获取用户< / h2>
< table id =maintable>
< thead>< tr>< th> First< / th>< th> Last< / th>< th>角色< / th>< / tr>< / thead>
< tbody id =tableBody>
@ Html.Action（GetUserData，new {selectedRole = Model}）
< / tbody>
< / table>
< div id =textbox1> 123< / div>
@using（Ajax.BeginForm（GetUser，ajaxOpts））
{
< div>
@Html.DropDownList（selectedRole，新的SelectList（
new [] {All}。Concat（Enum.GetNames（typeof（Role）））））
< button类型= 提交 >提交< /按钮>
< / div>
}
("#textbox1").text("function 1 called again"); } </script> <h2>Get User</h2> <table id="maintable"> <thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead> <tbody id="tableBody"> @Html.Action("GetUserData", new { selectedRole = Model }) </tbody> </table> <div id="textbox1">123</div> @using (Ajax.BeginForm("GetUser", ajaxOpts)) { <div> @Html.DropDownList("selectedRole", new SelectList( new[] { "All" }.Concat(Enum.GetNames(typeof(Role))))) <button type="submit">Submit</button> </div> }
这是局部视图GetUserData.cshtml
This is partial view GetUserData.cshtml
@model IEnumerable<SampleMVC.Models.User>
<table id="PartialTable">
<tr>
<th>
@Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
@Html.DisplayNameFor(model => model.LastName)
</th>
<th>
@Html.DisplayNameFor(model => model.BirthDate)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.BirthDate)
</td>
<td></td>
</tr>
}
</table>
什么我试图实现的是，在选择更改组合框时，表格值应该被过滤，而带有id = textbox1的Div标签应该显示在function1（）中提到的值。
我尝试了什么：
如果我替换了我的GetUser.cshtml视图，那么它工作正常并使用过滤值更新表。但是当我如上所述修改它时，它的行为并不相同。
What I'm trying to achieve is, on selection change of combo box table values should get filtered and Div tag with id=textbox1 should display value as mentioned in function1().
What I have tried:
If i replace my GetUser.cshtml view then it's working fine and updating the table with filtered values. But it doesn't behave same when I modify it as mentioned above.
@using SampleMVC.Models
@model string
@{
ViewBag.Title = "GetUser";
AjaxOptions ajaxOpts = new AjaxOptions {
UpdateTargetId = "tableBody"
};
}
<h2>Get User</h2>
<table>
<thead><tr><th>First</th><th>Last</th><th>Role</th></tr></thead>
<tbody id="tableBody">
@Html.Action("GetUserData", new {selectedRole = Model })
</tbody>
</table>
@using (Ajax.BeginForm("GetUser", ajaxOpts)) {
<div>
@Html.DropDownList("selectedRole", new SelectList(
new [] {"All"}.Concat(Enum.GetNames(typeof(Role)))))
<button type="submit">Submit</button>
</div>
}
这篇关于Mvc ajax怪异的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
