Question

当点击状态更新时，只应刷新相应的行。在此之前我写了下拉onchange函数，基于只显示表行。

cs.html：

<section class="card ">
            <div class="card-block">
                <h5 class="with-border m-t-lg">View Module List</h5>
                <div class="row">
                    <div class="col-lg-4">
                        <fieldset class="form-group">
                            <label class="form-label" for="exampleInput">Domain Name</label>
                            @Html.DropDownList("DomainID", null, "--- Select Domain Name ---", new { @class = "select2-arrow" })
                        </fieldset>
                    </div>
                </div>
                <br />
                <div class="table-responsive" id="findValue" style="display:none;">
                    <table id="example" class="display table table-bordered" cellspacing="0" width="100%;">
                        <thead>
                            <tr>
                                <th>S#</th>
                                <th>Module Name</th>
                                <th>Url</th>
                                <th>Roles</th>
                                <th>Action</th>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

            </div>
        </section>

基于查看表代码的下拉列表：

<script>
    $(document).ready(function () {

        $("#DomainID").change(function () {

            var id = $(this).val();
            $("#example tbody tr").remove();

            $.ajax({

                type: 'POST',

                url: '@Url.Action("ViewModules")',
                    dataType: 'json',
                    data: { id: id },
                    success: function (data) {
                        var items = '';
                        $.each(data.EmpList, function (i, item) {
                            $("#findValue").show();

                            /*Find Role here - Comparing Emp List ModuleId to RoleList ModuleId*/

                            var RoleName = $(data.role).filter(function (index, item) {
                                return item.ModuleID == item.ModuleID
                            });

                            if (item.ParentModuleID == -1) {

                                item.ModuleName = " -- " + item.ModuleName
                            }
                            else {
                                item.ModuleName = item.ModuleName
                            }

                            var Status = '';
                            if (item.Status == "Y") {
                                Status = '<a href="JavaScript:void(0)" data-status=' + item.Status + ' data-id=' + item.ModuleID + ' class="user-status" title="Disable status"><img src="/img/Active.png" height="22" width="42"/></a>'
                            } else {
                                Status = '<a href="JavaScript:void(0)" data-status=' + item.Status + ' data-id=' + item.ModuleID + ' class="user-status" title="Active status"><img src="/img/InActive.png" height="22" width="42"/></a>'
                            }

                            var rows = "<tr>"
                            + "<td>" + (i + 1) + "</td>"
                            + "<td>" + item.ModuleName + "</td>"
                            + "<td>" + item.Url + "</td>"
                            + "<td>" + RoleName[i].RoleName + "</td>"
                            + "<td>" + '<a href="@Url.Action("EditModules", "Account")?id=' + item.ModuleID + '" class="font-icon font-icon-pencil" title="Edit"></a>&nbsp;&nbsp;&nbsp;' + Status + "</td>"
                            + "</tr>";
                        $('#example tbody').append(rows);
                    });
                },
                error: function (ex) {
                    var r = jQuery.parseJSON(response.responseText);
                    alert("Message: " + r.Message);
                    alert("StackTrace: " + r.StackTrace);
                    alert("ExceptionType: " + r.ExceptionType);
                }
            });
            return false;
        });
    });
    </script>

更新状态代码

<script>
        $(document).ready(function () {
            $("#example tbody").on('click', '.user-status', function () {
                var getId = $(this).data('id');
                var status = $(this).attr('data-status');

                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("UpdateStatusModule")',
                    dataType: 'json',
                    data: { ModuleID: getId },
                    success: function (data) {
                        if (data.success) {
                            alert(data.message);
                            $("#example tbody").load("/Account/UpdateStatusModule");
                        }
                    },
                    error: function (ex) {
                        alert('Failed to retrieve Sub Categories : ' + ex);
                    }
                });

            });
        });
    </script>

我根据只显示表格行写下了onchange函数。当点击状态更新时，只有相应的行应该刷新onchange，不应该更改值

#region Update Status
        [Authorize]
        [HttpPost]
        public ActionResult UpdateStatusModule(int ModuleID)
        {
            try
            {
                int refID = Convert.ToInt32(Session["RefID"]);
                int typeID = Convert.ToInt32(Session["ComTypeID"]);

                if (ModelState.IsValid && refID > 0)
                {
                    userType type = new userType();
                    type.UpdateStatusModule(ModuleID);
                }
                return Json(new { success = true, message = "updated successfully" }, JsonRequestBehavior.AllowGet);
            }
            catch
            {
                return View();
            }

        }
        #endregion

Answer 1

如果在初始化后附加html，它就无法工作。您需要在文档上注册事件（没有$（document）.ready）

$(document).on("change","#DomainID", function () {
    alert("domain changed");
 }).on('click', '.user-status', function () {
    alert("clicked");
 });

对于异步POST：

$.post("MyUrl",{myId: myId},function(data){
    do wathever
}).fail(function(x,y,z){
    alert("ops");
});

更简单

更新状态函数不应刷新哪个使用mvc更改下拉列表？

1 个答案: