首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在ASP.NET MVC中渲染单击按钮时的部分视图

在ASP.NET MVC中渲染单击按钮时的部分视图
EN

Stack Overflow用户
提问于 2015-03-19 18:42:38
回答 2查看 133.5K关注 0票数 27

我将描述的问题与我已经找到的问题非常相似(例如this post with nearly identical name),但我希望我能把它变成一个不重复的东西。

我在Visual Studio中创建了一个新的ASP.NET MVC5应用程序。然后,我定义了两个模型类:

代码语言:javascript
复制
public class SearchCriterionModel
{
  public string Keyword { get; set; }
}

public class SearchResultModel
{
  public int Id { get; set; }
  public string FirstName { get; set; }
  public string Surname { get; set; }
}

然后我创建了SearchController,如下所示:

代码语言:javascript
复制
public class SearchController : Controller
{
  public ActionResult Index()
  {
    return View();
  }

  public ActionResult DisplaySearchResults()
  {
    var model = new List<SearchResultModel>
    {
      new SearchResultModel { Id=1, FirstName="Peter", Surname="Pan" },
      new SearchResultModel { Id=2, FirstName="Jane", Surname="Doe" }
    };
    return PartialView("SearchResults", model);
  }
}

以及视图Index.cshtml (强类型,使用SearchCriterionModel作为模型和模板编辑)和SearchResults.cshtml作为部分视图,模型类型为IEnumerable<SearchResultModel> (模板列表)。

这是索引视图:

代码语言:javascript
复制
@model WebApplication1.Models.SearchCriterionModel

@{
  ViewBag.Title = "Index";
}

@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()

  <div class="form-horizontal">
    <h4>SearchCriterionModel</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
      @Html.LabelFor(model => model.Keyword, htmlAttributes: new { @class = "control-label col-md-2" })
      <div class="col-md-10">
        @Html.EditorFor(model => model.Keyword, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.Keyword, "", new { @class = "text-danger" })
      </div>
    </div>

    <div class="form-group">
      <div class="col-md-offset-2 col-md-10">
        <input type="button" id="btnDisplaySearchResults" value="Search" onclick="location.href='@Url.Action("DisplaySearchResults", "SearchController")'" />
      </div>
    </div>
  </div>
}

<div>
  @Html.ActionLink("Back to List", "Index")
</div>
<div id="searchResults">

</div>

如您所见,我在标准模板下面添加了一个带有id="searchResults"div,并编辑了该按钮。我想要的是在底部的div中显示部分视图SearchResults.cshtml,但仅在单击按钮后显示。我已经通过使用@Html.Partial("SearchResults", ViewBag.MyData)成功地在那里显示了一个局部视图,但是它是在第一次加载父视图时呈现的,并且我已经在Index()方法中设置了ViewBag.MyData,这不是我想要的。

摘要:单击该按钮后,我将获得一些SearchResultModel实例的List (通过数据库访问),然后应该使用这些新获得的数据作为模型来呈现局部视图。我怎么才能做到这一点呢?我似乎已经在第一步失败了,那就是用上面的代码响应按钮点击。现在,我导航到URL ~/Search/DisplaySearchResults,但当然没有任何内容,也没有调用任何代码隐藏方法。在传统的ASP.NET中,我只需添加一个服务器端OnClick处理程序,设置网格的DataSource并显示网格即可。但在MVC中,这个简单的任务我已经失败了……

更新:将按钮更改为@Html.ActionLink,我终于可以进入控制器方法。但很自然,因为它返回局部视图,所以它显示为整个页面内容。所以问题是:如何告诉部分视图在客户端的特定div中呈现?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-03-19 18:59:49

将按钮更改为

代码语言:javascript
复制
<button id="search">Search</button>

并添加以下脚本

代码语言:javascript
复制
var url = '@Url.Action("DisplaySearchResults", "Search")';
$('#search').click(function() {
  var keyWord = $('#Keyword').val();
  $('#searchResults').load(url, { searchText: keyWord });
})

并修改控制器方法以接受搜索文本

代码语言:javascript
复制
public ActionResult DisplaySearchResults(string searchText)
{
  var model = // build list based on parameter searchText
   return PartialView("SearchResults", model);
}

jQuery .load方法调用控制器方法,传递搜索文本的值,并使用部分视图更新<div>的内容。

附注:这里可能不需要使用<form>标记、@Html.ValidationSummary()@Html.ValidationMessageFor()。您从未返回Index视图,因此ValidationSummary没有任何意义,我假设您希望null搜索文本返回所有结果,而且在任何情况下,您都没有属性Keyword的任何验证属性,因此没有任何需要验证的内容。

编辑

根据OP的评论,表单将包含多个具有验证属性的属性,然后方法是包含一个提交按钮并处理表单.submit()事件

代码语言:javascript
复制
<input type="submit" value="Search" />

var url = '@Url.Action("DisplaySearchResults", "Search")';
$('form').submit(function() {
  if (!$(this).valid()) { 
    return false; // prevent the ajax call if validation errors
  }
  var form = $(this).serialize();
  $('#searchResults').load(url, form);
  return false; // prevent the default submit action
})

而控制器方法将是

代码语言:javascript
复制
public ActionResult DisplaySearchResults(SearchCriterionModel criteria)
{
  var model = // build list based on the properties of criteria
  return PartialView("SearchResults", model);
}
票数 59
EN

Stack Overflow用户

发布于 2019-06-06 05:10:29

下面是控制器代码。

代码语言:javascript
复制
public IActionResult AddURLTest()
{
    return ViewComponent("AddURL");
}

您可以使用JQuery load方法加载它。

代码语言:javascript
复制
$(document).ready (function(){
    $("#LoadSignIn").click(function(){
        $('#UserControl').load("/Home/AddURLTest");
    });
});

code link

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29142422

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档