部分视图中的按钮在搜索后停止工作

时间:2016-09-13 06:15:07

标签: c# html asp.net-mvc razor

我有一个布局页面和一个PartialView。

我在布局页面上有一个搜索按钮,在局部视图中有一个表中的更新按钮。

点击搜索按钮后,更新按钮停止工作。它工作正常,直到我搜索。我猜测它与形式和行动结果有关,但我不能让它发挥作用。从未达到行动结果 - "什么都没有"发生的情况。

Image of the problem

控制器 - RegisterTruckUser

[HttpPost]
        public ActionResult RegisterTruckUser(string registerName, string registerPassword, string employeeNumber, string userTeam)
        {
            var model = new RegisterModel
            {
                UserList = db.SearchTruckUsers(""),
                UserTeamList = GetUserTeamList(),
                TriggerOnLoad = true
            };

            //If the Save button is clicked the user is updated
            if (Request.Form.AllKeys.Contains("btnupdateuser"))
            {
                if (!Request["btnupdateuser"].IsEmpty())
                {
                    Name = Request.Form["item.Name"];
                    password = Request["item.Password"];
                    EmployeeNumber = Request["item.EmployeeNumber"];
                    Userteam = Request["item.UserTeam"];

                    db.UpdateTruckUser(Name, password, EmployeeNumber, Userteam);
                    model.UserList = db.SearchTruckUsers("");
                    return PartialView(model);
                }
            }
                ModelState.Clear();
                return View(model);
            }
            model.TriggerOnLoadMessage = ErrorMessage;
            return View(model);
        }

控制器 - SearchPartialView

[HttpPost]
        public PartialViewResult SearchPartialView(string searchUserString)
        {
            if (Session["myID"] == null)
            {
                ExpireSession();
            }

            if (!ModelState.IsValid)
                RedirectToLogin();

            if (searchUserString.Any(char.IsDigit))
            {
                var model1 = new RegisterModel
                {
                    TriggerOnLoad = false,
                    UserList = db.SearchTruckUsersEmpNum(searchUserString),
                    UserTeamList = GetUserTeamList()
                };
                return PartialView("_RegisterTruckUserPartialView", model1);
            }

            var model = new RegisterModel
            {
                TriggerOnLoad = false,
                UserList = db.SearchTruckUsers(searchUserString),
                UserTeamList = GetUserTeamList()
            };
            return PartialView("_RegisterTruckUserPartialView", model);
        }

RegisterLayout

@model Name.Models.RegisterModel

<!DOCTYPE html>
<html lang="en">
<head>
    <title>@ViewBag.Title - Register</title>
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
</head>

<body>
    @RenderPage("~/Views/Shared/_Header.cshtml")
    @RenderBody()
    <div class="center" id="top">

                    <div id="search" class="active">
                        <h1>Manage users</h1>

                        @using (Ajax.BeginForm("SearchPartialView", "Register", null,
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "divUsers",
            }, new
            {
                id = "usertable"
            }))
                        {

                            @Html.TextBox("SearchUserString", null, new { @class = "responsivetextbox", @placeholder = "Search username or employment number" })
                            <p>
                                <input type="submit" class="standardbutton logsearch" name="submit" value="Search" />
                            </p>
                        }
                        <div id="divUsers">
                            @{Html.RenderPartial("_RegisterTruckUserPartialView");}
                        </div>
        </div>
    </div>

    @RenderPage("~/Views/Shared/_Footer.cshtml")
</body>
</html>

PartialView(表格)

<table class="centeredTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Password</th>
                <th>Employment Number</th>
                <th>Team</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        @foreach (var item in Model.UserList)
        {
            using (Html.BeginForm())
            {
                <tr id="usertabletr1">
                    <td id="usertabletd1">
                        @Html.EditorFor(modelItem => item.Name, new {htmlAttributes = new {@name = "test1", @style = "border: 0px none;"}})
                    </td>
                    <td id="usertabletd1">
                        @Html.EditorFor(modelItem => item.Password, new {htmlAttributes = new {@name = "registerPassword", @type = "password", @style = "border: 0px none; "}})
                    </td>
                    <td id="usertabletd1">
                        @Html.EditorFor(modelItem => item.EmployeeNumber, new {htmlAttributes = new {@name = "employeeNumber", @readonly = "readonly", @style = "border: 0px none; background: white;"}})
                    </td>
                    <td id="usertabletd1">
                        @Html.DropDownListFor(modelItem => item.UserTeam, Model.UserTeamList, item.UserTeam, new {htmlAttributes = new {@name = "Team", @style = "border: 0px none;"}})
                    </td>
                    <td id="usertabletd1">
                            <input class="standardbutton adddefaultvaluesubmit" type="image" src="~/Pictures/saveicon.ico" alt="Save" value="Save" name="btnupdateuser"/>
                        <input class="standardbutton adddefaultvaluesubmit" type="image" src="~/Pictures/trashcanicon.ico" alt="Delete" value="Delete" name="btndeleteuser"/>
                    </td>
                </tr>
            }
        }
        </tbody>
    </table>

1 个答案:

答案 0 :(得分:1)

在局部视图中,它看起来应该是这样的。

<input type="button" value="Confirm team change" class="btnConfirm"/>

然后将其添加到“主要”布局中。

$(document).on('click', '.btnConfirm', function(){
$.ajax({
    url: '@Url.Action("RegisterTruckUser", "Register")',
    type: 'POST',
    cache: false,
    async: true,
    data: $('form').serialize(),
    success: function(result){
        //do something
    }
 });
});