如何使用Ajax Begin表单正确使用部分视图

我在index.cshtml中有以下代码

@using Kendo.Mvc.UI; @using xx.Relacionamiento.Modelo.Bussiness.Entities; @using xx.Relacionamiento.Modelo.Bussiness.Entities.Custom;    @model PresupuestosGenerale @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } 
 
 @Html.Partial("CreateOrEditPresupuestoGeneralxx", Model) 
 
 
 

然后我有以下PartialView

 @using xx.Relacionamiento.Modelo.Bussiness.Entities.Enumeraciones; @using xx.Relacionamiento.Modelo.Bussiness.Entities; @using Kendo.Mvc.UI; @model PresupuestosGenerale 
 
 @using (Ajax.BeginForm("CreateOrEditPresupuestoGeneralxx", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "ContenedorPresupuestoGeneral", InsertionMode = InsertionMode.Replace })) { @Html.HiddenFor(h => h.PresupuestoGeneralId) @Html.Hidden("Categoria",CategoriaEvento.xx.ToString()) 
 
 Presupuesto Global xx 
 @(Html.Kendo().NumericTextBoxFor(e => e.PresupuestoGlobal) .Decimals(0) .DecreaseButtonTitle("Decrementar") .IncreaseButtonTitle("Incrementar") .Format("c0") .HtmlAttributes(new { style = "width:99%;" }) .Max(1000000000000000000) .Min(1) .Step(100000) .Placeholder("Presupuesto General xx")) @Html.ValidationMessageFor(v => v.Valor, "", new { @style = "color: rgba(247, 20, 10, 0.97);" }) 
 
 
  
 
 } 
 
  $(function () { MostrarVentanaLoading = false; @if (!string.IsNullOrEmpty(ViewBag.MensajeError)) { @:mostrarMensajeAlertGlobal("@ViewBag.MensajeError",15000) } else if (!string.IsNullOrEmpty(ViewBag.MensajeSuccess)) { @:mostrarMensajeAlertSuccessGlobal("@ViewBag.MensajeSuccess", 15000); } });  

然后在我的控制器上，我有业务逻辑，根据条件返回不同的东西

  public ActionResult CreateOrEditPresupuestoGeneralxx(PresupuestosGenerale presupuestoGeneralxx) { try { ModelState.Remove("PresupuestoGlobal"); if (presupuestoGeneralxx == null) { return PartialView(); } if (!ModelState.IsValid) { return PartialView(presupuestoGeneraxx); } if (presupuestoGeneralxx.Valor < 1) { ModelState.AddModelError("Valor", "Por favor ingrese un presupuesto total"); return PartialView(presupuestoGeneralxx); } 

因此，当用户提交表单时，索引视图中的容器将替换为新的html。

代码工作得非常好，但是我觉得代码很丑，不可维护且难以阅读。

我的问题是，使用asp.net mvc和ajax是否有更好，更有条理的方式来实现相同的东西，更可读的代码？

Answer 1

我会重构将ajaxforms移到partial之外的视图。 这样，在表单内部呈现的完整部分在ajaxpost上刷新，不知不觉并且容器结构分离，每个视图都有自己的责任：

Index.cshtml

 
 
 @using (Ajax.BeginForm("CreateOrEditPresupuestoGeneralxx", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "form-content", InsertionMode = InsertionMode.Replace })) { 
 @Html.Partial("CreateOrEditPresupuestoGeneralxx", Model) 
 } 
  

CreateOrEditPresupuestoGeneralxx.cshtml

 @using xx.Relacionamiento.Modelo.Bussiness.Entities.Enumeraciones; @using xx.Relacionamiento.Modelo.Bussiness.Entities; @using Kendo.Mvc.UI; @model PresupuestosGenerale @Html.HiddenFor(h => h.PresupuestoGeneralId) @Html.Hidden("Categoria",CategoriaEvento.xx.ToString()) 
 ... 

Answer 2

这是我在一些项目中使用的示例之一。 在此示例中，不仅渲染了PartialView ，还将DropdownList值传递给PartialView并在其上显示。

查看：

 
 @Html.Partial("~/Views/MyPartialView.cshtml", Model) 
 $(document).ready(function () { $(".SelectedCustomer").change(function (event) { $.ajax({ url: '@Url.Action("GetPartialDiv", "Home")', data: { id: $(this).val() /*add other additional parameters */ }, cache: false, type: "POST", dataType: "html", success: function (data, textStatus, XMLHttpRequest) { SetData(data); }, error: function (data) { onError(data); } }); }); function SetData(data) { $("#divPartialView").html(data); //HTML DOM replace } }); 

控制器：

 [HttpPost] public PartialViewResult GetPartialDiv(int id /* ddl's selectedvalue */) { Models.GuestResponse guestResponse = new Models.GuestResponse(); guestResponse.Name = "this was generated from this ddl id:"; return PartialView("MyPartialView", guestResponse); } 

希望这可以帮助…