Jak poprawnie korzystać z częściowym widokiem Ajax Rozpocznij formularz

Question

Mam następujący kod w moim 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 /> 

Następnie Mam następujący 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> 

Wtedy na moim kontrolera mam logika biznesowa, która zwraca coś innego w zależności od warunków

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

Tak więc, gdy użytkownik przesyła formularz, kontener z widoku indeksu jest zastępowany nowym html.

Kod działa idealnie dobrze, jednak uważam, że kod jest brzydki, nie do utrzymania i trudny do odczytania.

Moje pytania, czy z asp.net mvc i ajax jest lepszy i bardziej zorganizowany sposób na osiągnięcie tego samego z bardziej czytelnym kodem?

Answer 1

Chciałbym refactor poglądów przenoszących formularz ajax poza częściowe. W ten sposób pełny częściowy który jest renderowany wewnątrz formy jest odświeżany na ajax stanowiska, utrzymuje nieświadomy i oddzielona od konstrukcji zbiornika i każdy ma swój własny pogląd odpowiedzialność:

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

Oto jeden z przykładów, który wykorzystałem w niektórych moich projektach. W tym przykładzie renderowane jest nie tylko PartialView, ale wartość jest przekazywana do PartialView i wyświetlana na nim.

Widok:

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

Kontroler:

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

Nadzieja to pomaga ...