Wie Sie sich richtig Teilansichten mit Ajax verwenden

Question

Ich habe den folgenden Code in meinem index.cshtml

@using Kendo.Mvc.UI; 
@using xx.Relacionamiento.Modelo.Bussiness.Entities; 
@using xx.Relacionamiento.Modelo.Bussiness.Entities.Custom; 

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
<script src="~/Scripts/jquery.validate.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 

@model PresupuestosGenerale 

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 

    } 

<div class=""> 

    <div id="ContenedorPresupuestoGeneral"> 
     @Html.Partial("CreateOrEditPresupuestoGeneralxx", Model) 
    </div> 
    <br /> 
    <br /> 

Dann habe ich die folgende PartialView

@using xx.Relacionamiento.Modelo.Bussiness.Entities.Enumeraciones; 
@using xx.Relacionamiento.Modelo.Bussiness.Entities; 
@using Kendo.Mvc.UI; 


@model PresupuestosGenerale 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     @using (Ajax.BeginForm("CreateOrEditPresupuestoGeneralxx", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "ContenedorPresupuestoGeneral", InsertionMode = InsertionMode.Replace })) 
     { 
      @Html.HiddenFor(h => h.PresupuestoGeneralId) 
      @Html.Hidden("Categoria",CategoriaEvento.xx.ToString()) 
      <div class="row"> 
       <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
        <label>Presupuesto Global xx</label> 
        <br /> 
        @(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);" }) 
       </div> 
       <div class="col-md-3"> 
        <br /> 
        <input type="submit" class="form-control btn btn-primary" value="Guardar Presupuesto" onclick="SetMostrarVentana();" /> 
       </div> 
      </div> 
     } 


    </div> 
</div> 
<script type="text/javascript"> 

    $(function() { 
     MostrarVentanaLoading = false; 
     @if (!string.IsNullOrEmpty(ViewBag.MensajeError)) 
     { 
      @:mostrarMensajeAlertGlobal("@ViewBag.MensajeError",15000) 
     } 
     else if (!string.IsNullOrEmpty(ViewBag.MensajeSuccess)) 
     { 
      @:mostrarMensajeAlertSuccessGlobal("@ViewBag.MensajeSuccess", 15000); 
     } 
    }); 

</script> 

Dann auf meinem Controller Ich habe Geschäftslogik, die je nach den Bedingungen etwas anderes zurückgibt

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); 
       } 

Also, wenn der Benutzer Übergibt das Formular, der Container aus der Indexansicht wird durch den neuen HTML ersetzt.

Der Code funktioniert einwandfrei, aber ich fühle, dass der Code hässlich, nicht wartbar und schwer zu lesen ist.

Meine Fragen, ist, mit asp.net mvc und Ajax gibt es eine bessere und organisierte Art und Weise, das gleiche mit besser lesbaren Code zu erreichen?

Answer 1

Ich würde die Ansichten umgestalten, indem ich die Ajax-Form außerhalb des Partiellen verschiebe. Auf diese Weise die volle Teil, die im Inneren der Form gemacht wird, wird auf Ajax-Beiträge aktualisiert, hält nicht bewusst und entkoppelt von Behälterstruktur und jede Ansicht hat ihre eigene Verantwortung:

Index.cshtml

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     @using (Ajax.BeginForm("CreateOrEditPresupuestoGeneralxx", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "form-content", InsertionMode = InsertionMode.Replace })) 
     { 
      <div id="form-content"> 
       @Html.Partial("CreateOrEditPresupuestoGeneralxx", Model) 
      </div> 
     } 
    </div> 
</div> 

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()) 
<div class="row"> 
... 

Answer 2

Hier ist eines der Beispiele, die ich in einigen meiner Projekte verwendet habe. In diesem Beispiel wird nicht nur PartialView gerendert, sondern auch ein DropdownList Wert an die PartialView übergeben und darauf angezeigt.

Ausblick:

<div id="divPartialView"> 
    @Html.Partial("~/Views/MyPartialView.cshtml", Model) 
</div> 


$(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 
    } 
}); 

Controller:

[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); 
} 

hoffe, das hilft ...