刷新頁面的一部分

我有一個包含3個部門的頁面，例如General，Attendee Information和Customized Questions（Partial view）。定製問題將顯示問題列表（文本框）以及答案（dropdownlist），其中包含一個編輯按鈕，用於修改下拉列表中的答案字段。現在，當點擊編輯按鈕時，一旦用戶點擊修改答案應該在下拉列表中反映的保存按鈕，彈出窗口就會出現以修改答案字段。我已經爲自定義問題創建了部分視圖，但答案值仍未反映下拉列表中的更改。任何示例代碼或想法？刷新頁面的一部分

控制器

[HttpPost] 
     public ActionResult UpdateAnswers(string answers, string question, string controlid, int eventid) 
     { 
      var replacetext=string.Empty; 
      if (answers.Length>0) 
      replacetext = answers.Replace("\n", ","); 
      _service.UpdateAnswers(eventid, replacetext, controlid); 
      var eventdetails = _service.GeteventByID(eventid); 
      return PartialView("CustomizedQuestions", eventdetails); 
     }

管窺

@using EM.Website.Helpers 
@model EM.Model.tbl_SBAem_Event 
@{ 
    var dropdownList = new List<KeyValuePair<int, string>> {new KeyValuePair<int, string>(0, "Required"), new KeyValuePair<int, string>(1, "Optional"), new KeyValuePair<int, string>(2, "Hidden")}; 
    var selectList = new SelectList(dropdownList, "key", "value", 0); 
} 

@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(true) 
     <table class="table-customized-question"> 
       <tr> 
        <th class="td-customized-question-row"></th> 
        <th class="td-customized-question-row">Question Label</th> 
        <th class="td-customized-question-row">Display Mode</th> 
        <th class="td-customized-question-row">Answer Field</th> 
        <th class="td-customized-question-row">Edit Choices</th> 
       </tr> 
       <tr> 
        <td class="td-customized-question-firstrow">#1</td> 
        <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt1Name)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt1, selectList)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt1Values, @Html.SplitText(Model.EM_opt1Values, ','), new { @class = "dropdownlist-width" })</td> 
        <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt1Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt1Name, answers = Model.EM_opt1Values, id = "EM_opt1Values", eventID = Model.EventMngID })</td> 
       </tr> 
       <tr> 
        <td class="td-customized-question-firstrow">#2</td> 
        <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt2Name)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt2, selectList)</td> 

        <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt2Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt2Name, answers = Model.EM_opt2Values, id = "EM_opt2Values", eventID = Model.EventMngID })</td> 
       </tr> 
       <tr> 
        <td class="td-customized-question-firstrow">#3</td> 
        <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt3Name)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt3, selectList)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt3Values, @Html.SplitText(Model.EM_opt3Values, ','), new { @class = "dropdownlist-width" })</td> 
        <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt3Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt3Name, answers = Model.EM_opt3Values, id = "EM_opt3Values", eventID = Model.EventMngID })</td> 
       </tr> 
       <tr> 
        <td class="td-customized-question-firstrow">#4</td> 
        <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt4Name)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt4, selectList)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt4Values, @Html.SplitText(Model.EM_opt4Values, ','), new { @class = "dropdownlist-width" })</td> 
        <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt4Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt4Name, answers = Model.EM_opt4Values, id = "EM_opt4Values", eventID = Model.EventMngID })</td> 
       </tr> 
       <tr> 
        <td class="td-customized-question-firstrow">#5</td> 
        <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt5Name)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt5, selectList)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt5Values, @Html.SplitText(Model.EM_opt5Values, ','), new { @class = "dropdownlist-width" })</td> 
        <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt5Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt5Name, answers = Model.EM_opt5Values, id = "EM_opt5Values", eventID = Model.EventMngID })</td> 
       </tr> 
       <tr> 
        <td class="td-customized-question-firstrow">#6</td> 
        <td class="td-customized-question-row">@Html.EditorFor(model => model.EM_opt6Name)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_reqOpt6, selectList)</td> 
        <td class="td-customized-question-row">@Html.DropDownListFor(model => model.EM_opt6Values, @Html.SplitText(Model.EM_opt6Values, ','), new { @class = "dropdownlist-width" })</td> 
        <td>@Html.ActionImage("CustomizedQuestion", new { eventID = Model.EventMngID, question = Model.EM_opt6Name }, "~/Content/Images/edit.jpg", "Edit", new { @class = "editButton", title = Model.EM_opt6Name, answers = Model.EM_opt6Values, id = "EM_opt6Values", eventID = Model.EventMngID })</td> 
       </tr> 
      </table> 

}

jQuery的阿賈克斯

$(".editButton").live("click", function (e) { 
       e.preventDefault(); 
       var $title = $(this).attr("title"); 
       var $answers = $(this).attr("answers"); 
       var $controlid = $(this).attr("id"); 
       var $eventId = $(this).attr("eventID"); 
       dropdownlist($controlid, $title, $answers, $eventId); 
      }); 

function dropdownlist(controlid, title, answer, eventid) { 
      var $answersreplaced = answer.replace(/\,/g, "&nbsp;\r"); 
      var $deleteDialog = $('<div><textarea id="answerlist" rows="10" cols="50">' + $answersreplaced + '</textarea><div><div style="font-size:9px">(To change back to an open answer field, delete all choices above and save)</div>'); 
      $deleteDialog.dialog({ 
       resizable: false, 
       height: 280, 
       width: 350, 
       title: title + " - Edit Choices", 
       modal: true, 
       buttons: { 
        "Save": function() { 
         $.ajax({ 
          url: '@Url.Action("UpdateAnswers")', 
          type: 'POST', 
          dataType: 'html', 
          context: $(this), 
          data: { 
           answers: $("#answerlist").val(), 
           question: title, 
           controlid: controlid, 
           eventid: eventid 
          }, 
          success: function (result) { 
           $(this).dialog("close"); 
           alert(result); 
           $("#"+controlid+"").html(data); 
          }, 
          error: function() { 
           //xhr, ajaxOptions, thrownError 
           alert('there was a problem saving the new answers, please try again'); 
          } 
         }); 
        }, 
        Cancel: function() { 
         $(this).dialog("close"); 
        } 
       } 
      }); 
     };

來源

2012-05-24 user335160

我的方法是否正確？

是的，你的方法是正確的。例如，您可以使用jQuery UI dialog來實現彈出和編輯部分。這個想法是使用AJAX，以避免刷新整個頁面，但只有你感興趣的部分。因此，將在模式對話框中顯示的部分將包含一個表單，將使用AJAX和服務器將返回部分視圖和有關問題的新信息。

來源

2012-05-24 08:45:56

好吧，但我怎麼能在部分視圖中使用該實體與視圖相同？部分視圖可以自動獲取與視圖相同的實體嗎？ – user335160

我不明白你在問什麼。您可以將任何視圖模型傳遞給控制器操作的局部視圖。 –

嗨達林 - 請參閱有關提出的問題的更新細節。非常感謝 – user335160

您必須使用

$.ajax({ 
      type: "POST", 
      url: '@Url.Action("action", "controller")', 

      data: "{... parameterd}", 
      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
         .. $("#yourDivID").html(data); 
      } 
     });

@using（Ajax.BeginForm（「行動」，「控制器」，ajaxOptions）），而不是

@using（Html.BeginForm（））

來源

2012-05-24 11:53:40

非常感謝，我仍然需要jquery-ajax代碼嗎？似乎這個動作和控制器正在調用局部視圖 – user335160

是的。把你的Ajax代碼到一個函數，並把它放在這樣「的onSuccess」選項：AjaxOptions ajaxOptions =新AjaxOptions { 列舉HTTPMethod = 「郵報」， UpdateTargetId = 「yourDiv」，的onSuccess = 「yourFunction中」 }; –

好的，那麼和是什麼？ – user335160

刷新頁面的一部分

回答

相關問題