Question

我的主视图有一些下拉列表和单选按钮。在更改单选按钮时，使用ajax调用在div id =“ partialView”内部更新部分视图。

我的视图如下：

      <div class="row text-align-left" style="background-color: #fffbf2;">
            <form>
                <fieldset>
                    <div class="col-md-2 col-sm-2 col-xs-2 " id="divEngineer">
                        <label>Engineer<span class="error">*</span></label>
                        @Html.DropDownList("CODE", (IEnumerable<SelectListItem>)ViewData["EnggList"], "--Select--", new { @placeholder = "--Select--", @class = "form-control", @id = "ddlEngineer" })
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-2 " id="divNature">
                        <label>Call Nature<span class="error">*</span></label>
                        @Html.DropDownList("CALLNATUREID", (IEnumerable<SelectListItem>)ViewData["CallNatureList"], "--Select--", new { @placeholder = "--Select--", @class = "form-control", @id = "ddlCallNature" })
                    </div>
                    <div class="col-md-2 col-sm-2 col-xs-2 " id="divSDM">
                        <label>SDM<span class="error">*</span></label>
                        @Html.DropDownList("Code", (IEnumerable<SelectListItem>)ViewData["SDMList"], new { @placeholder = "--Select--", @class = "form-control", @id = "ddlSDM" })
                    </div>                        

                    <div class="radio-inline col-md-1 col-sm-1 col-xs-1 ">
                        <label><input type="radio" id="r1" name="rdbSDMDesk" value="reviewResp" checked>Review of Response</label>
                    </div>
                    <div class="radio-inline col-md-1 col-sm-1 col-xs-1 ">
                        <label><input type="radio" id="r2" name="rdbSDMDesk" value="schCalls">Schedule Calls</label>
                    </div>
                    <div class="radio-inline col-md-2 col-sm-2 col-xs-2 ">
                        <label><input type="radio" id="r3" name="rdbSDMDesk" value="reschCalls">Re-schedule Calls (Clear from BD)</label>
                    </div>
                    <div class="radio-inline col-md-1 col-sm-1 col-xs-1 ">
                        <label><input type="radio" id="r4" name="rdbSDMDesk" value="expAppr">Expense Approval</label>
                    </div>
                    <div class="radio-inline col-md-1 col-sm-1 col-xs-1 ">
                        <label><input type="radio" id="r5" name="rdbSDMDesk" value="pmReview">PM Review</label>
                    </div>
                </fieldset>
            </form>
        </div>

        <div id="partialView"></div>

主视图中的JavaScript代码：

         //When Radio selection changes
        $("#r1, #r2, #r3, #r4, #r5").change(function () { 
            if ($("input[name='rdbSDMDesk']").is(':checked')) {
                $("#overlay").show();
                var rdbval = $("input[name='rdbSDMDesk']:checked").val();
                var CallNature = $('#ddlCallNature').val();
                var SDMCode = $('#ddlSDM').val();
                var FECode = $('#ddlEngineer').val();
                if (SDMCode == "0")
                {
                    SDMCode = "admin";
                }
                if (rdbval == "reviewResp" || rdbval == "schCalls" || rdbval == "reschCalls")
                {
                    $("#divNature").show();
                    $("#divSDM").show();
                    $("#divEngineer").hide();
                }
                else
                {
                    $("#divEngineer").show();
                    $("#divSDM").show();
                    $("#divNature").hide();
                }
                $.ajax({
                    url: '@Url.Action("GetSDMDeskDetail", "BankingService")',
                    contentType: 'application/html; charset=utf-8',
                    type: 'GET',
                    dataType: 'html',
                    data: { rdbval: rdbval, SDMCode: SDMCode, CallNature: CallNature, FECode: FECode },
                })
                .success(function (result) {
                    $('#partialView').html(result);
                    $("#viewErrorFillSDMDetail").hide();
                    $("#overlay").hide();
                })
                 .error(function (xhr, status) {
                     $("#viewErrorFillSDMDetail").show();
                     alert(xhr.responseText);
                     $("#overlay").hide();
                 });
            }
        });

现在，这将到达返回部分视图的控制器。

控制器代码：

         private ActionResult ExpenseApprCallsResults(string FECode, string SDMCode, string rdbValue)
        {
        ATMCRMProcedureDetails modelSP = new ATMCRMProcedureDetails();
        string UserName = "admin";

        modelSP.GetExpApprTickets = dbOraContext.GETCONVTICKETSFORAPPROVE(SDMCode, FECode).ToList();
        modelSP.rdbValue = rdbValue;
        modelSP.selectedFeCode = FECode;
        modelSP.selectedSDMCode = SDMCode;
        return PartialView("SDMDeskExpApproval", modelSP);
        }

这里的局部视图完美地包含了必要的细节。现在，在我的局部视图中，我尝试通过单击批准/拒绝来更新正在填充的每一行。（如下图所示）

部分视图内的JavaScript

    function clickAppDisApp(TICKET, VISITTYPE, SITEVISITID, TYPE) {
    var ApprovedKM = $('#kmAppr').val();
    var rdbValue = $('#hidRdbValue').val();
    var selectedFE = $('#hidSelFE').val();
    var selectedSDM = $('#hidSelSDM').val();
    $.ajax({
        cache: false,
        url: '@Url.Action("UpdateSDMExpenseApproval", "BankingService")',
        dataType: "json",  
        type: "GET",
        data: { "CALLTICKETNUMBER": TICKET, "VISITTYPE": VISITTYPE, "SITEVISITID": SITEVISITID, "TYPE": TYPE, "APPRKM": ApprovedKM, "rdbValue": rdbValue, "selectedFE": selectedFE, "selectedSDM": selectedSDM },
        success: function (result) {
            isSuccess = result;
            $("#overlay").hide();
        },
        error: function (result) {
            alert('An error occured while taking the action')
            isSuccess = result;
        }
    }).done(function () {
        alert(isSuccess);
        $("#overlay").hide();
    })
}

最后是上述JS的控制器代码

    [HttpGet]
    public ActionResult UpdateSDMExpenseApproval(long CALLTICKETNUMBER, string VISITTYPE, decimal SITEVISITID, string TYPE, decimal APPRKM, string rdbValue, string selectedFE, string selectedSDM)
    {
      // Necessary Code Here
     return Json(result, JsonRequestBehavior.AllowGet);
    }

问题：单击超链接后，将到达上面的控制器代码并更新数据库中的值。但是，一旦ajax成功，它也应该使用更新的数据重新加载同一局部视图（更新的值将从列表中删除）。由于在主视图上调用了部分视图，并且通过ajax调用在部分视图上完成了对值/行的更新，因此如何在ajax成功返回中在部分视图上返回更新的数据。

我是否必须返回主视图，因为其中包含保存部分视图的 div ？或可以通过某种方式重新加载部分视图，这些数据是我从 ExpenseApprCallsResults 操作控制器获得的数据。

谢谢！

Ajax提交后在主视图中重新加载部分视图

0 个答案: