2012-08-14 34 views
11

Tôi có Index xem:Nhìn ra một khoảng hiển thị trên nút bấm

@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> 

và một phần:

@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> 

Và điều khiển:

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

Làm thế nào để làm điều đó khi tôi Nhấp vào một trong nút chỉ hiển thị một phần hiển thị, bây giờ trình điều khiển muốn di chuyển tôi đến chế độ xem MuaItem;/

Trả lời

20

Việc đầu tiên cần làm là tham khảo jQuery. Ngay bây giờ bạn đã tham chiếu chỉ jquery.unobtrusive-ajax.min.js nhưng kịch bản này có sự phụ thuộc vào jQuery, vì vậy đừng quên để bao gồm càng tốt trước khi nó:

<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> 

Bây giờ câu hỏi của bạn: bạn nên sử dụng trình nút với một hình thức HTML. Trong ví dụ của bạn, bạn không có một hình thức để nó sẽ là ngữ nghĩa chính xác hơn để sử dụng một nút bình thường:

<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" })" /> 

và sau đó trong một tập tin javascript riêng AJAXify những nút bằng cách đăng ký với .click() sự kiện:

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

hoặc nếu bạn muốn dựa vào Microsoft khung kín đáo bạn có thể sử dụng 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" }) 

và nếu bạn muốn nút thay vì một chors bạn có thể sử dụng các hình thức 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> 
} 

Từ những gì tôi có thể thấy bạn đã bao gồm kịch bản jquery.unobtrusive-ajax.min.js vào trang của bạn và điều này sẽ làm việc.

+1

Trong ví dụ cuối cùng bạn không sử dụng UpdateTargerId, nó là dành cho mục đích hoặc sai lầm ? – netmajor

+0

Đó là do nhầm lẫn. Cảm ơn vì đã chú ý. Tôi sẽ sửa nó. –

+0

@DarinDimitrov: Khi sử dụng '@ Ajax.ActionLink', tôi có nên viết lại mã JS không? Tôi cũng bị mắc kẹt trong một tình huống tương tự. – Vini

1

Có lẽ không phải là giải pháp bạn đang tìm kiếm nhưng tôi sẽ quên về partials và sử dụng Javascript để gọi máy chủ lấy dữ liệu cần thiết và sau đó trả lại dữ liệu cho khách hàng dưới dạng JSON và sử dụng nó để hiển thị kết quả cho trang không đồng bộ.

Hàm 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 
}; 


})(); 

Và trên Server ....

public JsonResult myjsonaction(string prop) 
     { 
      var JsonResult; 

      // do whatever you need to do 

      return Json(JsonResult); 
     } 

hy vọng điều này giúp ....

Các vấn đề liên quan