Вы будете работать в JavaScript на клиенте, возможно, используя библиотеку jQuery, поставляемую с шаблоном проекта MVC.Вы, вероятно, используете $ .ajax () или аналогичный, с # .html () в случае успеха.
На сайте asp.net есть примеры, такие как http://www.asp.net/mvc/tutorials/iteration-7-add-ajax-functionality-cs
Подумайте об этомбудучи разделенным на две отдельные части - во-первых, вам нужно действие контроллера, которое будет возвращать отформатированный контент;во-вторых, вам нужно действие на стороне клиента, которое вызовет контроллер и обработает ответ.Вы можете найти учебники общего назначения по jQuery более полезными для второй части, поскольку они охватывают всю библиотеку.
Редактировать: Чувствуя себя хорошо, вот и все:
Вот простой контроллер:
Public Class HomeController
Inherits System.Web.Mvc.Controller
Function Index() As ActionResult
ViewData("Message") = "Welcome to ASP.NET MVC!"
Return View()
End Function
Function About() As ActionResult
Return View()
End Function
Function SayHello() As ActionResult
Return Content("Hello!")
End Function
Function SayFormattedHello() As ActionResult
Return Content("<span style='color:red'>Hello <span style='color:blue'>in colour</span></span>")
End Function
<HttpPost()>
Function SayHelloPost(name As String) As ActionResult
Return Content("Hello " & name)
End Function
End Class
Действия Index и About полностью ванильны, они не затронуты в шаблоне.Я добавил 3 глупых метода, которые показывают суть того, как использовать MVC с клиентскими вызовами.Метод Content () на контроллере просто возвращает строку и может использоваться для такого рода вещей.Более полезными в реальных условиях являются Partial () и JSON (), которые возвращают частичное представление и данные в формате JSON соответственно.(Примечание: если вы запрашиваете JSON с GET-запросами, вам нужно указать JsonBehaviour.AllowGet в качестве второго параметра в методе - защита по умолчанию отключает это, и вы получите забавное сообщение об ошибке).Первые два метода будут получать запросы как GET, так и POST, третий будет отвечать только на запросы POST.
А вот соответствующее представление (я использовал Index, но может быть любым):
<%@ Page Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<h2>
<%: ViewData("Message") %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<div>
<p id="link1">
Say Hello</p>
<p>
<span id="output1"></span>
</p>
</div>
<div>
<p id="link2">
Say Hello</p>
<p>
<span id="output2"></span>
</p>
</div>
<div>
<p id="link3">
Say Hello</p>
<p>
<span id="output3"></span>
</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#link1").click(function () {
$.get('Home/SayHello', function (data) {
$('#output1').html(data);
alert('Load was performed.');
});
});
$("#link2").click(function () {
$.get('Home/SayFormattedHello', function (data) {
$('#output2').html(data);
alert('Load was performed.');
});
});
$("#link3").click(function () {
$.post('Home/SayHelloPost',
{ "name": "Richard" },
function (data) {
$('#output3').html(data);
});
});
});
</script>
</asp:Content>
Довольно просто здесь.Первый бит - это снова ванильное содержимое представления Index, которое поставляется с шаблоном.Ниже, я просто добавил <div>
для каждого из моих примеров, с произвольной активируемой кнопкой мыши - я использовал <p>
s, может быть что угодно, что может быть адресовано каким-то образом, я использовал идентификаторы, но классы или что-то ещедолжно сработать.Существуют также произвольные заполнители, в которые будут попадать результаты, опять же я использовал <span>
, но может быть любым.
Где-то в представлении - где-нибудь выше пользовательского сценария - вставьте ссылку на jQuery.В производстве, вероятно, лучше всего использовать минимизированный сервер или сервер Google для экономии трафика.Для разработки я бы остановился на vsdoc, который поддерживает intellisense и его легче читать, если вам нужно.
Второй тег script в основном устанавливает обработчики событий.Я сделал это прямо с сайта документации jQuery и просто изменил параметры.Документация по jQuery действительно хороша и дает множество примеров.
Если вам нужна помощь в отладке, в настоящее время большинство браузеров имеют отладку JavaScript, которую вы можете вызывать, будь то FireBug, IE Developer Tools или Chrome.Все они имеют точки останова и т. Д., Как и в коде .Net, так что вы можете видеть, что происходит.