如何在MVC4中單擊按鈕後無需重新加載從子視圖重定向到父視圖？

Question

嗨如何停止頁面重新加載時，點擊按鈕是從ChildView到Parentview。也就是說

CustomerView

CustomerView

在我CustomerView我有場名爲區及附近地區我已經創建了一個添加按鈕。假設我輸入了客戶詳細信息並選擇了該區域，並且該區域未列在下拉列表中。所以我需要添加該區域。所以我點擊添加按鈕。它將從客戶視圖重定向到區域局部視圖。我爲該區域創建了一個區域局部視圖。

AreaPartialView

AreaPartialView

如果我點擊接近區域添加按鈕將其重定向到AreaPartialView（本地主機/客戶/ AreaPartialView）。在區域局部視圖中，我輸入值並單擊創建按鈕它將數據保存在數據庫中，並且它也重定向到相同的客戶視圖。現在我的問題是，如果我輸入客戶名稱，街道，位置，地點，別名，然後只有我選擇該地區。現在該區域沒有列在下拉列表中，意味着我需要添加它，所以我點擊添加按鈕附近的區域。它重定向到區域部分視圖，我輸入值並單擊創建按鈕。當我點擊部分視圖區域的創建按鈕時，重定向到相同客戶視圖，同時頁面重新加載。所以我的數據都丟失了，我輸入了客戶名稱，街道，地點，地點，別名，所以我必須再次輸入詳細信息。這是我的問題。我不希望頁面重新加載時，它從部分視圖重定向到CutomerView，所以我決定使用Ajax。但問題仍未解決，請任何人修改我的代碼。

我PartialViewChildView

<div class="col-xs-12"> 
    <div class="container"> 
     <div class="col-sm-4"> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.DisplayName, new { @class = "control-label" }) 
       @Html.TextBoxFor(model => model.DisplayName, new { @class = "form-control", type = "text" }) 
       @Html.ValidationMessageFor(model => model.DisplayName) 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      <div class="form-group"> 
       @Html.LabelFor(model => model.PrintName, new { @class = "control-label" }) 
       @Html.TextBoxFor(model => model.PrintName, new { @class = "form-control", type = "text" }) 
       @Html.ValidationMessageFor(model => model.PrintName) 
      </div> 
     </div> 
     <div class="col-sm-4"> 
      <div class="form-group"> 
       @Html.Label("City") 
       @Html.DropDownList("CityID", "Select") 
      </div> 
     </div> 
    </div> 
</div> 
<p> 
    <input type="submit" id="btncreate" value="Create" onclick='window.location ="@Url.Action("Create", "Customer")"' /> 
</p> 
    </fieldset> 
} 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
<script> 
    $("#btncreate").click(function() { 
     $.ajax({ 
      url: "Customer/Create", 
      type: "get", 
      data: $("Customer").serialize(), 
      success: function (result) { 
       $("#ShowPartailView").html(result); 
      } 
     }); 
    }); 
</script> 

}

其實我沒有在阿賈克斯以及知識。所以我donno我已經放在數據的地方：$（「？」）。serialize（），所以請任何人檢查我的ajax代碼，並給我正確的解決方案。

我的控制器編碼，以節省其在局部視圖中輸入數據

public PartialViewResult ShowPartailView() 
    { 
     ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName"); 
     return PartialView("ShowPartailView"); 
    } 


    [HttpPost] 
    public ActionResult ShowPartailView(Area area) 
    { 
     ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName"); 
     if (ModelState.IsValid) 
     { 
      area.AreaID = Guid.NewGuid(); 
      area.IsActive = true; 
      area.IsDeleted = false; 
      area.CreatedDate = DateTime.Now; 
      area.EditedDate = DateTime.Now; 
      area.LastActiveOn = DateTime.Now; 
      area.RowID = Guid.NewGuid(); 
      area.CreatedSessionID = Guid.NewGuid(); 
      area.EditedSessionID = Guid.NewGuid(); 
      area.OfflineMode = false; 
      area.OfflineID = Guid.NewGuid(); 

      db.Areas.Add(area); 
      db.SaveChanges(); 

     }; 


     return RedirectToAction("Create", "Customer"); 
    } 

我的客戶視圖ParentView

<div id="Area"> 
    <div class="col-sm-4"> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Area) 
      @Html.DropDownList("AreaID", "Select") 
      <input type='button' id=btnArea name=btnadd value='Add' onclick='window.location ="@Url.Action("ShowPartailView", "Customer")"' /> 
     </div> 
    </div> 
</div> 

Answer 1

填補像這種方法的下拉列表中，它沒有重新加載頁面和所有其他提交的數據將保持不變。

$.ajax({ 
     type: "GET", 
     url: "test/filldropdown", 
     data: data, 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (jsonResult) { 
       $.each(jQuery.parseJSON(jsonResult), function() { 
       myDropDownList.append($("<option></option>").val(this['FieldDescription']).html(this['FieldCode'])); 
     }); 
     }, 
     failure: function (response) { 
        alert(response.d); 
       } 
     }); 

Click for an Example