Mvc ajax怪异的行为

本文介绍了Mvc ajax怪异的行为的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是网络编程的新手，我正在尝试将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>
}

推荐答案

这是局部视图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>

@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怪异的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

getUserData