2012-08-14 13 views
11

tengo Índice de vista:Vista parcial rinde en el botón haga clic

@using System.Web.Mvc.Html 
@model MsmqTestApp.Models.MsmqData 
<!DOCTYPE html> 
<html> 
<head> 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 
    <meta name="viewport" content="width=device-width" /> 
    <title>MsmqTest</title> 
</head> 
<body> 
    <div> 
     <input type="submit" id="btnBuy" value="Buy" onclick="location.href='@Url.Action("BuyItem", "MsmqTest", new { area = "Msmq" })'" /> 
     <input type="submit" id="btnSell" value="Sell" onclick="location.href='@Url.Action("SellItem", "MsmqTest", new { area = "Msmq" })'" /> 
    </div> 
    <div id="msmqpartial"> 
    @{Html.RenderPartial("Partial1", Model); } 

    </div> 
</body> 
</html> 

y parcial:

@using System.Web.Mvc.Html 
@model MsmqTestApp.Models.MsmqData 

    <p> 
     Items to buy 
     @foreach (var item in Model.ItemsToBuy) 
     { 
      <tr> 
       <td>@Html.DisplayFor(model => item) 
       </td> 
      </tr> 
     } 
    </p> 
    <p> 
     <a>Items Selled</a> 
     @foreach (var item in Model.ItemsSelled) 
     { 
      <tr> 
       <td>@Html.DisplayFor(model => item) 
       </td> 
      </tr> 
     } 
    </p> 

y el controlador:

public class MsmqTestController : Controller 
    { 
     public MsmqData data = new MsmqData(); 

     public ActionResult Index() 
     { 

      return View(data); 
     } 

     public ActionResult BuyItem() 
     { 
      PushIntoQueue(); 
      ViewBag.DataBuyCount = data.ItemsToBuy.Count; 
      return PartialView("Partial1",data); 
     } 
} 

cómo hacerlo cuando haga clic en una de las botón solo vista parcial renderizar, ahora el controlador quiere moverme a la vista BuyItem;/

Respuesta

20

Lo primero que debe hacer es hacer referencia a jQuery. En este momento usted ha referenciado solamente jquery.unobtrusive-ajax.min.js pero este script tiene dependencia de jQuery, por lo que no se olvide de incluir también ante sí:

<script src="@Url.Content("~/Scripts/jquery.jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

Ahora a su pregunta: usted debe utilizar los botones de envío de un formulario HTML. En su ejemplo que no tiene una forma por lo que sería más correcto semánticamente utilizar un botón de lo normal:

<input type="button" value="Buy" data-url="@Url.Action("BuyItem", "MsmqTest", new { area = "Msmq" })" /> 
<input type="button" value="Sell" data-url="@Url.Action("SellItem", "MsmqTest", new { area = "Msmq" })" /> 

y luego en un archivo JavaScript independiente AJAXify esos botones mediante la suscripción de la .click() evento:

$(function() { 
    $(':button').click(function() { 
     $.ajax({ 
      url: $(this).data('url'), 
      type: 'GET', 
      cache: false, 
      success: function(result) { 
       $('#msmqpartial').html(result); 
      } 
     }); 
     return false; 
    }); 
}); 

o si desea confiar en el marco discreto Microsoft podría utilizar AJAX actionlinks:

@Ajax.ActionLink("Buy", "BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }) 
@Ajax.ActionLink("Sell", "SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }) 

y si quieres botones en lugar de una Chors podría utilizar formas AJAX:

@using (Ajax.BeginForm("BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })) 
{ 
    <button type="submit">Buy</button> 
} 
@using (Ajax.BeginForm("SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })) 
{ 
    <button type="submit">Sell</button> 
} 

Por lo que puedo ver que ya han incluido el guión jquery.unobtrusive-ajax.min.js a su página y esto debería funcionar.

+1

En último ejemplo no utiliza UpdateTargerId, es para el propósito o por error ? – netmajor

+0

Es por error. Gracias por notarlo. Yo lo arreglare. –

+0

@DarinDimitrov: Cuando uso '@ Ajax.ActionLink' ¿debería volver a escribir el código JS? También estoy atrapado en una situación similar. – Vini

1

Quizás no sea la solución que estabas buscando pero, me olvidaría de los parciales y usar Javascript para llamar al servidor y obtener los datos necesarios para luego devolver los datos al cliente como JSON y usarlos para mostrar los resultados al página asincrónicamente

La función de JavaScript;

var MyName = (function() { 


//PRIVATE FUNCTIONS 
var renderHtml = function(data){ 
    $.map(data, function (item) { 
     $("<td>" + item.whateveritisyoureturn + "</td>").appendTo("#msmqpartial"); 
    }); 
}; 

//PUBLIC FUNCTIONS 
var getData = function(val){ 
    // call the server method to get some results. 
    $.ajax({ type: "POST", 
     url: "/mycontroller/myjsonaction", 
     dataType: "json", 
     data: { prop: val }, 
     success: function (data) { 
      renderHtml(); 
     }, 
     error: function() { 
     }, 
     complete: function() { 
     } 
    }); 
}; 

//EXPOSED PROPERTIES AND FUNCTIONS 
return { 
    GetData : getData 
}; 


})(); 

y en el servidor ....

public JsonResult myjsonaction(string prop) 
     { 
      var JsonResult; 

      // do whatever you need to do 

      return Json(JsonResult); 
     } 

esperanza esto ayuda ....

Cuestiones relacionadas