MVC 4单击按钮获取部分页面

本文关键字：分页 获取部 按钮 单击 MVC | 更新日期: 2023-09-27 17:54:10

我正在创建一个具有搜索属性的页面。用户将在搜索字段中输入一个数字，然后点击提交按钮。我需要能够调用一个控制器方法，以运行搜索代码。

现在我只是试图击中部分页面，只是得到一些功能在那里。下面是我到目前为止的代码。到目前为止，当我点击按钮时什么也没有发生。我听说Ajax是一种可以使用的东西，所以我一直在尝试它。我还在学习框架，所以请原谅我。

<div class="span6 roundedCorners">
    <div class="row-fluid Title">
        <div class="span6">
            Search Area
        </div>
    </div>
    <div class="row-fluid individual">
        <div class="row-fluid">
            <div class="span4"><span class="pull-right fieldDescription">Number</span></div>
            <div class="span8"><input /></div>
        </div>
        <div class="row">
            <div class="span12" id="adminSubmitButton">
                @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "_adminDetails" }))
                {
                    <button type="submit" class="btn btn-inverse">Submit</button>
                }
            </div>
        </div>
    </div>

MVC 4单击按钮获取部分页面

您的表单是空的，它只有一个提交按钮。您需要将搜索按钮移动到表单内部。像这样:

模型
public class SearchModel
{
    [Required]
    public string Query { get; set; }
}
视图

@model SearchModel
...
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "_adminDetails" }))
{
   @Html.EditorFor(m => m.Query)
   @Html.ValidationMessageFor(m => m.Query)
   <button type="submit" class="btn btn-inverse">Submit</button>
}
<div id="_adminDetails"></di>

注意:确保你有一个id为_adminDetails的元素

控制器必须接受模型并执行搜索。例子:

控制器

 [HttpPost]
 public ActionResult Index(SearchModel model)
 {
    //do something with your model (perform search)
    return View(results);
 }

好了，我现在已经部分工作了。当我点击按钮，我可以调用控制器方法使用:

function adminButton()
        {
            $("#adminDetails").load("@Url.Action("ControllerMethod", "ControllerName")");
        }

。动作帮助器允许我调用返回部分视图的方法。这是朝着正确方向迈出的一步。但是从我所读到的，我应该能够使用下面的Url助手，而不是@Url。行动:

"@Url("ControllerMethod", "ControllerName")/" + submitButton.Value

我已经尝试了一些变化，我仍然在做一些阅读找出一个解决方案。有帮手会让我这么做吗?

谢谢大家的帮助。周五晚上我确实解决了我的问题。基本上，我所做的就是在点击按钮时加载部分页面通过JS/jQuery和Razor @Url.Action()的帮助来调用返回PartialView的控制器方法:

<script type="text/javascript">
    function adminButton()
    {
        var link = "@Url.Action("ControllerMethod", "ControllerClass", new { 
                                         number = -1})";
        var num = parseInt($("#number").val());
        link = link.replace(-1, num);
        $("#details").load(link);
    }
</script>
相关文章：