Question

我对MVC很新，我试图找出是否有更好的方法来做到这一点。我有一个文本框供用户放入他们的搜索，然后基于该搜索我在搜索框下面显示一些结果。我试图避免在我的视图中有如此多的代码逻辑，并想知道是否有更好的方法来处理它。这是我现有的代码，它基于＆＃34; Model.Results＆＃34;的值。如果其余的逻辑通过，它将返回3个部分视图中的一个或按钮：

@section CustomerPrefixInfo
{
    @if (Model.Results == PrefixSearch.SearchResults.CustomerFound)
    {
        @Html.Partial("_CustomerPrefixInfo")
    }
    @if (Model.Results == PrefixSearch.SearchResults.PrefixResultsFound)
    {
        @Html.Partial("_PrefixResults")
    }
    @if (Model.Results == PrefixSearch.SearchResults.AnimalsFound)
    {
        @Html.Partial("_AnimalSearchResults")
    }
    @if (Model.Results == PrefixSearch.SearchResults.ValidNewPrefix)
    {
        using (Html.BeginForm("Index", "PrefixManagement", new { prefix = Model.AnimalPrefix.Prefix, dbPrefix = Model.AnimalPrefix.DbPrefix }))
        {
            <fieldset>
                <input id="btnReservePrefix" type="submit" value="Reserve Prefix" />
            </fieldset>
        }
    }
}

我想将它放在一个控制器中，以便它只返回要显示的视图，然后只在页面上显示该视图。在做了一些重做之后，我认为使用Ajax.BeginForm并将InsertionMode设置为InsertAfter就可以了：

@using (Ajax.BeginForm("GenericSearch", "Home", FormMethod.Post, new AjaxOptions { InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "searchResults" }))
{
    <fieldset>
        <input id="btnPrefixSearch" type="submit" value="Prefix Search/Validate"/>
        @Html.EditorFor(model => model.Input)
    </fieldset>
    <div id="searchResults">

    </div>
}

我的GenericSearch Action然后使用开关来决定返回哪个部分视图：

public ActionResult GenericSearch(PrefixSearch prefixSearch)
{
    //some database logic here to get the results
    switch (prefixSearch.Results)
    {
        case PrefixSearch.SearchResults.CustomerFound:
            return PartialView("_CustomerPrefixInfo", prefixSearch);
        case PrefixSearch.SearchResults.PrefixResultsFound:
            return PartialView("_PrefixResults", prefixSearch);
        case PrefixSearch.SearchResults.AnimalsFound:
            return PartialView("_AnimalSearchResults", prefixSearch);
        default:
            return null;
     }
}

但是当我尝试这个时，它会将部分视图放在新页面上。

这是我的部分观点之一（它们都是3个与此大致相同）

@model MVC_Test_Project.Models.PrefixSearch

@{
    ViewBag.Title = "PrefixResults";
 }

@{
    Layout = null;
 }
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.PrefixResults[0].Prefix)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PrefixResults[0].CustomerCount)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PrefixResults[0].Link)
        </th>
    </tr>

@foreach (var item in Model.PrefixResults)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Prefix)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CustomerCount)
        </td>
        <td>
            <a href="@item.Link">edit</a>               
        </td>
    </tr>
}
 </table>

任何帮助将不胜感激！

编辑只是一个有用的提示，如果有人犯了同样的愚蠢错误，请确保在你的脚本之前调用你的包。

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>

当我提到使用那些时，我已经添加了最后两行，但它们超出了我的捆绑......因此ajax因为它而无法工作。感谢各位的帮助，现在一切都很好！ --Joseph

Answer 1

确保在页面顶部包含jQuery和jquery.unobtrusive-ajax.js（或jquery.unobtrusive-ajax.min.js），以便执行Ajax。

像这样：

<script src="~/scripts/jquery-1.x.x.js" />
<script src="~/scripts/jquery.unobtrusive-ajax.js" />

...
The rest of your page down here
...

这样可以在页面内呈现Partial的回发，而不是每次都重定向。

如果您还没有获得jQuery文件，或者不确定如何包含它们;在这里阅读：http://www.c-sharpcorner.com/UploadFile/4fcb5a/update-a-div-and-partial-view-using-ajax-beginform-on-form-s/ - 这非常有用。

确保在web.config文件中也启用了Unobtrusive JS。它们在<appsettings>节点中看起来像这样：

<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>

如果你正在使用验证 - 我怀疑你是为了搜索;但请留意我 - 您也可能想要包含jquery.validate.js和jquery.validate.unobtrusive.js。这可以允许客户端验证（如果可能）使UX更顺畅。

注意：是执行Ajax请求的其他方式;比如在你自己的JS脚本中创建它 - 这个例子是最简单的使用已经可用且备受喜爱的库：）

希望这有帮助！

修改
然后，返回部分视图的switch可以完全从Controller内部完成。您可以从页面视图中删除逻辑。

然后，Ajax将负责替换您为Ajax.BeginForm帮助程序提供的div ID的内容。

您可以完全替换搜索表单 - 使用其ID，或者更好的是 - 在页面中放置一个空的<div>容器，准备显示结果：

<div id="searchResults"></div>

然后，Ajax将返回部分视图并将内容放入searchResults div。

编辑2

我注意到你遗失的Ajax.BeginForm AjaxOptions个对象HttpMethod = "POST"。

AjaxOptions看起来应该是这样的：

new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "searchResults", InsertionMode = InsertionMode.Replace }

Answer 2

我想将它放在一个控制器中，以便它只返回视图

似乎很直接：

视图模型：

public class MyModel
{
  public string PageToRender { get; set; }
}

控制器操作

public ActionResult DoLogic()
{
  //var Results = ?? as The ENum

  switch(Results)
  {
    PrefixSearch.SearchResults.CustomerFound:
      model.PageToRender = "_CustomerPrefixInfo";
    // etc etc
  }    

  return View(model);
}

查看：

 @{if (!string.IsNullOrEmpty(model.PageToRender))
   Html.RenderPartial(model.PageToRender);}

虽然我可能会装饰Enum：

public enum SearchResults
{
  [Display(Name="_CustomerPrefixInfo")]
  CustomerFound
}

然后没有switch语句，你只是grab the enum value display attribute's name value。

MVC部分视图问题

2 个答案: