jquery 如何在ASP.NET MVC中制作更新面板

w46czmvw  于 2022-12-26  发布在  jQuery
关注(0)|答案(3)|浏览(148)

如何在ASP.NET Model-View-Contoller (MVC)框架中创建更新面板?

zvms9eto

zvms9eto1#

你可以在ASP.NET MVC中使用局部视图来获得类似的行为。局部视图仍然可以在服务器上构建HTML,你只需要将HTML插入到适当的位置(事实上,如果你愿意包含MSFT Ajax库,MVC AJAX 助手可以为你设置这个)。
在主视图中,可以使用 AJAX 表单设置异步请求。

<% using (Ajax.BeginForm("Index", "Movie", 
                            new AjaxOptions {
                               OnFailure="searchFailed", 
                               HttpMethod="GET",
                               UpdateTargetId="movieTable",    
                            }))
                       
       { %>
            <input id="searchBox" type="text" name="query" />
            <input type="submit" value="Search" />            
    <% } %>
    
    <div id="movieTable">
        <% Html.RenderPartial("_MovieTable", Model); %>
   </div>

局部视图封装了要更新的页面部分。

<%@ Control Language="C#" Inherits="ViewUserControl<IEnumerable<Movie>>" %>

<table>
    <tr>       
        <th>
            Title
        </th>
        <th>
            ReleaseDate
        </th>       
    </tr>
    <% foreach (var item in Model)
       { %>
    <tr>        
        <td>
            <%= Html.Encode(item.Title) %>
        </td>
        <td>
            <%= Html.Encode(item.ReleaseDate.Year) %>
        </td>       
    </tr>
    <% } %>
</table>

然后设置你的控制器动作来处理这两种情况。部分视图结果可以很好地处理asych请求。

public ActionResult Index(string query)
{          
    var movies = ...

    if (Request.IsAjaxRequest())
    {
        return PartialView("_MovieTable", movies);
    }

    return View("Index", movies);      
}
uujelgoq

uujelgoq2#

基本上"传统的“服务器控件(包括ASP.NET AJAX 控件)在MVC中不能开箱即用......页面的生命周期是非常不同的。使用MVC,你可以更直接地呈现你的Html流,而不是WebForms Package 你的抽象/伪状态框。
要在MVC中“模拟”UpdatePanel,可以考虑使用jQuery填充<DIV>以获得类似的结果。
HTML很简单:

<input name="query" id="query" value="dollar" />
<input type="button" onclick="search();" value="search" />

面板的数据以JSON format表示- MVC可以自动完成此操作,请参见NerdDinner SearchController.cs

public ActionResult SearchByLocation(float latitude, float longitude) {
        // code removed for clarity ...
        return Json(jsonDinners.ToList());
    }

jQuery/javascript也是

<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
  <script type="text/javascript">
  // bit of jquery help
  // http://shashankshetty.wordpress.com/2009/03/04/using-jsonresult-with-jquery-in-aspnet-mvc/
  function search()
  {
    var q = $('#query').attr("value")
    $('#results').html(""); // clear previous
    var u = "http://"+location.host+"/SearchJson.aspx?searchfor=" + q;
    $("#contentLoading").css('visibility',''); // from tinisles.blogspot.com
    $.getJSON(u,
        function(data){ 
          $.each(data, function(i,result){ 
            $("<div/>").html('<a href="'+ result.url+'">'+result.name +'</a>'
                            +'<br />'+ result.description
                            +'<br /><span class="little">'+ result.url +' - '
                            + result.size +' bytes - '
                            + result.date +'</span>').appendTo("#results");
          });
        $("#contentLoading").css('visibility','hidden');
        });
  }
  </script>

当然,UpdatePanel可以用于比这复杂得多的场景(它可以包含INPUTS,支持ViewState和跨不同面板和其他控件的触发器)。如果您需要在MVC应用中实现这种复杂性,恐怕您可能需要进行一些自定义开发...

h7appiyu

h7appiyu3#

如果你是asp.mvc的新手,我建议你下载NerdDinnersource)示例应用程序,你会在那里找到足够的信息来开始有效地使用mvc,他们也有 AJAX 示例,你会发现你不需要更新panel。

相关问题