我如何將窗口彈出的數據傳遞給控制器​​

Question

我創建了一個名爲AddCust.cshtml的彈出窗口。一旦用戶點擊了btnSaveConsumer，它應該提取所有輸入的值。但我不知道如何通過控制器。我試圖使用像下面的JavaScript，但它不傳遞任何東西從AddCust.cshtml。請指教，謝謝

AddCust.cshtml

@model HHIMS_Web_App.Models.ConsumerModel 
@{ 

} 

<br /> 
<div> 

<fieldset id="AddNewConsumer"> 


         <br /> <br /> 
     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.HRN) 
       @Html.EditorFor(model => model.HRN) 
      </div> 

      <div class="smallBox"> 
       @Html.LabelFor(model => model.DOB) 
       @Html.EditorFor(model => model.DOB) 

      </div> 

     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.GivenName1) 
       @Html.EditorFor(model => model.GivenName1) 

      </div> 

     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.FamilyName1) 
       @Html.EditorFor(model => model.FamilyName1) 
      </div> 
      <div class="smallBox"> 
       @Html.LabelFor(model => model.Ethnicity) 
       @Html.EditorFor(model => model.Ethnicity) 

      </div> 
     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.GivenName2) 
       @Html.EditorFor(model => model.GivenName2) 

      </div> 

     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.FamilyName2) 
       @Html.EditorFor(model => model.FamilyName2) 
      </div> 

     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.Address) 
       @Html.EditorFor(model => model.Address) 

      </div> 

      <div class="smallBox"> 
       @Html.LabelFor(model => model.CarerContactName) 
       @Html.EditorFor(model => model.CarerContactName) 

      </div> 

     </div> 



     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.Community) 
       @Html.EditorFor(model => model.Community) 

      </div> 
      <div class="smallBox"> 
       @Html.LabelFor(model => model.CarerContact) 
       @Html.EditorFor(model => model.CarerContact) 

      </div> 


     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.State) 
       @Html.EditorFor(model => model.State) 

      </div> 


     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.PostCode) 
       @Html.EditorFor(model => model.PostCode) 
      </div> 

     </div> 

     <div> 
      <div class="addConsumerInfo"> 
       @Html.LabelFor(model => model.Phone) 
       @Html.EditorFor(model => model.Phone) 
      </div> 
      <div class="smallAddAndCancel"> 
       <input type="button" id="btnCancel" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Cancel" value="Cancel" onclick="window.close()" /> 
       <input type="button" id="btnSaveConsumer" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Save" value="Save" /> 

      </div> 
     </div> 

    </fieldset> 

</div> 


<script type="text/javascript"> 



    $(document).ready(function() { 


     $('#btnSaveConsumer').click(function() { 

      var hrn; 
      var community; 
      var ethnicity; 
      var familyName; 
      var givenName; 

      if (hrn) { 
       $filter.push({ field: "HRN", operator: "contains", value: hrn }); 
      } 

      if (community) { 
       $filter.push({ field: "Community", operator: "contains", value: community }); 
      } 

      if (familyName) { 
       $filter.push({ field: "FamilyName", operator: "contains", value: familyName }); 
      } 

      if (givenName) { 
       $filter.push({ field: "GivenName", operator: "contains", value: givenName }); 
      } 

      if (ethnicity) { 
       $filter.push({ field: "Ethnicity", operator: "contains", value: ethnicity }); 
      } 

      $.ajax({ 
       type: 'POST', 
       url: "@(Url.Content("~/ConsumerDetails/CreateConsumerList/"))", 
       data: { 
         "HRN": hrn, 
         "Community":community, 
         "FamilyName1":familyName, 
         "GivenName1":givenName, 
         "Ethnicity":ethnicity, 

       }, 

      }); 
     }); 


    }); 

</script> 

控制器：

[HttpPost] 
     public ActionResult CreateConsumerList(ConsumerModel model) 
     { 
      if (ModelState.IsValid) 
      { 

       HHIMS_DataAccessLayer.Consumers dalModel = new HH.Consumers(); 
       Mapper.CreateMap<ConsumerModel, HH.Consumers>(); 
       Mapper.Map(model, dalModel); 

       dbConsumer.SaveConsumer(dalModel); 

      } 
      return RedirectToAction("Index"); 

     } 

Answer 1

使通過封裝的形式，所有的領域也更加簡單：

@using (Html.BeginForm("action","contoroller")) { 
    @Html.EditorFor(model => model.HRN) 
} 

然後提交表單

var $form = $("#the_id_of_the_form"); 
// want to validate your form? 
// $form.validate(); 
// if (!$form.valid()) return; 
$.ajax({ 
    type: 'POST', 
    url: "@Url.Action("CreateConsumerList","ConsumerDetails")", 
    data: $form.serialize(),    
}); 

或者，如果你不想使用表單什麼都原因：

$.ajax({ 
     type: 'POST', 
     url: "@Url.Action("CreateConsumerList","ConsumerDetails")", 
     data: { 
      HRN: $("#HRN").val() 
      // do the same for the rest of the fields 
     } 
    }); 

Answer 2

你不需要爲這個JavaScript。您正在通過收集.click事件中的表單字段值並調用$.ajax函數來添加更多工作。我覺得這是一個額外的步驟。我會建議使用AjaxHelper

@model HHIMS_Web_App.Models.ConsumerModel 

    @using(Ajax.BeginForm("CreateConsumerList", "ControllerName",new AjaxOptions {Success:, HttpMethod = "Post" })) 
    { 
    <div> 
     <fieldset id="AddNewConsumer"> 
// All your form fields here 
<div class="smallAddAndCancel"> 
       <input type="button" id="btnCancel" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Cancel" value="Cancel" onclick="window.close()" /> 
       <input type="submit" id="btnSaveConsumer" style="height:33px; width:70px; font-size:14px; background-color:#3399FF" class="k-button" title="Save" value="Save" /> 

      </div> 
    </fieldset> 

    </div> 
    }