1

ajax投稿を介して部分ビューが更新されたときに、ページのビューモデルを更新しようとしています。部分ビューは正しく更新されますが、次の更新呼び出しで、モデルは元の状態に戻ったように見えます。

部分ビューはテーブルで、行を追加または削除しています。コードは、これを行う方法に関するアイデアの下に含まれています。

ページコードは

  •         <div class="filters">
                <fieldset class="source">
                    <legend>Search Attributes</legend>
                    <div id="attributes-filter">
                        @Html.Partial("_EditSearchQuery")
                    </div>
                </fieldset>
            </div>
            <div>              
                <a id="addRowLink" class="add-row-link" href="#">Add new clause</a>                
            </div>
        </div>
    </div>
    

    -- 部分的なビューは

    <table id="searchClauses" class="clauses">
    <tbody>
        <tr class="header">
            <td class="add-remove"></td>                                                      
            <td class="logical">And/Or</td>
            <td class="field">Field</td>
            <td class="operator">Operator</td>
            <td class="value">Value</td>
        </tr>
            @foreach (SearchClause item in Model.searchClauses)
            { 
                <tr class="clause clause-row" id=@item.RowID>
                    <td class="add-remove">   
                        <a href="#" title="Remove this filter line" id=@item.ID >Delete</a>                      
                    </td>
                    <td>  
                        @Html.DropDownListFor(modelitem => item.logicalTypeValue, new SelectList(item.logicalTypeList, "Value", "Text", "Selected"), new { style = "width: 60px" })                                                                
                    </td>
                    <td>
                        @Html.DropDownListFor(modelitem => item.fieldListValue, new SelectList(item.fieldList, "Value", "Text", "Selected"))                               
                    </td>
                    <td>                              
                        @Html.DropDownListFor(modelitem => item.operatorListValue, new SelectList(item.operatorList, "Value", "Text", "Selected"), new { style = "width: 60px" })                    
                    </td>
                    <td>                               
                        @Html.TextBoxFor(modelitem => item.valuesList[0], new { style = "width: 130px" })
                    </td>
                </tr>    
            }                   
    </tbody>
    

    - 脚本

    <script type="text/javascript">     
    $(function () {
        // Save quiz view - new or existing.
        $("#attributes-filter").on("click", "a", function () { // A jQuery delegated event - #EditQuiz is always present, a.SaveQuiz only exists when the _ElearningQuiz partial view is loaded.
            deleteRow($(this).attr("id"));
        });
    
        function deleteRow (id) {
            var rowData = {
                'id': id,
                'model' : @Html.Raw(Json.Encode(Model))
                };
    
            $.ajax({
                url: "/Participant/DeleteClause",
                type: "POST",
                data: JSON.stringify(rowData),
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    $("#attributes-filter").html(result);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Status: " + textStatus + " Error: " + errorThrown);
                }
            });
        };
    
        $("#addRowLink").click(function () {
            var model = @Html.Raw(Json.Encode(Model))
    
            $.ajax({
                url: "/Participant/AddClause",
                type: "POST",
                data: JSON.stringify(model),
                contentType: "application/json; charset=utf-8",
                success: function (result) {
                    $("#attributes-filter").html(result);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Status: " + textStatus + " Error: " + errorThrown);
                }
            });
        });
    }); 
    </script>
    

    -- コントローラー

    [HttpPost]
        public ActionResult AddClause(DynamicSearchModel model)
        {
            int campaignId = SessionManager.CampaignId;
            int clientId = SessionManager.ClientId;
    
            var newClause = _participantServiceClient.NewSearchClause(campaignId, clientId, 2);
            newClause.ID = model.searchClauses.Count + 1;
    
            model.searchClauses.Add(newClause);
    
            return PartialView("_EditSearchQuery", model);
        }
    
        [HttpPost]
        public ActionResult DeleteClause(string id, DynamicSearchModel model)
        {
            int _id = int.Parse(id);
    
            model.searchClauses.RemoveAt(_id - 1);
    
            return PartialView("_EditSearchQuery", model);
        }
    
    4

    0 に答える 0