Как обновить только часть страницы индекса в MVC 5?

Question

Страница индекса содержит два частичных вида. Один из них заключается в том, что пользователь вводит критерии поиска, а другой - для отображения результатов. Как обновить данные только в представлении «Результаты»?

Я использую MVC 5 и Razor. Я видел несколько примеров этого, в основном используя ajax и jquery. Я спрашиваю, что было бы лучше (предпочитают проще) решение этой

// INDEX VIEW:

<div id="div_Search"> 
@{Html.RenderPartial("~/Views/Shared/Search.cshtml", ViewBag.Model_Search);} 
</div> 

<div id="div_Results"> 
@{Html.RenderPartial("~/Views/Shared/Results.cshtml", ViewBag.Model_Results);} 
</div> 


// HOME CONTROLLER 

класс HomeController общественности: Контроллер { MainContextDB дб = новая MainContextDB();

public ActionResult Index() 
{ 
    // Code to initialize ViewBag.Model_Search, etc... 
    .... 

    // Code to initialize ViewBag.Model_Results, etc... (Values empty at startup) 
    .... 

    return View(); 
} 


[HttpPost] 
[ValidateAntiForgeryToken] 
public ActionResult GetResults([Bind(Include = "DropOffLoc,DropOffDate,PickUpDate")] Search search) 
{ 

    // Retrieve results using the search parameters, etc... 
    .... 

    // THIS RETURNS THE VIEW WITH THE DATA, BUT IN A SEPARATE PAGE (AS EXPECTED) 
    return View("~/Views/Shared/Results.cshtml", results);    

    // THIS RETURNS THE VIEW IN THE MAIN PAGE BUT WITH EMPTY DATA (AS EXPECTED) 
    return RedirectToAction("Index"); 

    // HOW TO RETURN THE VIEW WITH THE DATA IN THE MAIN PAGE ? 
    ??????? 

} 

}

// ЭТО ПОИСК ЧАСТИЧНЫЙ VIEW

@model Models.Results 

@using (Html.BeginForm("GetResults", "Home", FormMethod.Post, new { @class = "my-form" })) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 

    <div class="form-group input-group-sm"> 
     @Html.LabelFor(model => model.DropOffLoc) 
     @Html.DropDownListFor(model => model.DropOffLoc, ViewBag.LocationList as SelectList, new { @class = "form-control" }) 
     @Html.ValidationMessageFor(model => model.DropOffLoc) 
    </div> 

    <div class="form-group input-group-sm"> 
     @Html.LabelFor(model => model.DropOffDate) 
     @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." }) 
     @Html.ValidationMessageFor(model => model.DropOffDate) 
    </div> 

     <div class="form-group input-group-sm"> 
     @Html.LabelFor(model => model.PickUpDate) 
     @Html.TextBoxFor(model => model.PickUpDate, new { @class = "form-control datepicker", placeholder = "Enter Pick-up date here..." }) 
     @Html.ValidationMessageFor(model => model.PickUpDate) 
    </div> 

    <div style="text-align: center; margin-top: 10px; margin-bottom: 10px;"> 
     <input type="submit" id="getResults" value="GET RESULTS" class="btn btn-default btn-success" /> 
    </div> 
} 

Answer 1

Я бы поместил форму в ваш поиск частично. Тогда есть некоторые действия пост, который, с помощью JQuery, к вашему GetResults действий, которые должны вернуться:

return PartialView("~/Views/Shared/Results.cshtml", results); 

Затем в успех обратного вызова вашего поста JQuery, плюнуть возвращаемые результаты ваших $ («# div_Results») например:

$.ajax({ 
    url: '/Home/GetResults', 
    type: "POST", 
    dataType: "html", 
    data: $("#FormId").serialize(), 
    success: function (data) { 
     //Fill div with results 
     $("#div_Results").html(data); 
    }, 
    error: function() { alert('error'); } 
}); 

Если у меня нет опечатки или что-то еще, это должно сработать. Вам нужно будет заменить селектор форм идентификатором тега формы.

Answer 2

Вы, на самом деле, нужно использовать AJAX.

Наилучший подход, как я вижу, состоит в том, чтобы иметь частичный вид и выдавать ему AJAX Load (jQuery.load в jQuery).

Answer 3

хотя у этого вопроса уже есть ответ, я думал, что отправлю альтернативный подход, который также будет работать. Этот подход использует один и тот же метод действий и проверяет только, является ли запрос вызовом Ajax, который затем заменяет только часть тела. Вот только соответствующий код.

// Поиск формы

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions() 
                   { HttpMethod = "GET", UpdateTargetId = "my-posts", 
                    InsertionMode = InsertionMode.Replace 
                   })) 
         { 
          <input type="text" name="term" placeholder="Search B.I & G" /> 
          <input type="submit" value="" /> 
         } 

// Порция Вид

<section> 
<div id="my-posts"> 
    @Html.Partial("_Posts", Model.Posts) 
</div> 

Теперь здесь является Индексный метод действия, если запрос является AjaxRequest, она возвращает Partial View, который заменяет содержимое div id my-posts. Если запрос не является запросом Ajax, он загружает весь View.

 public async Task<ActionResult> Index(string term) 
    { 

     var viewModel = new HomeFeedsViewModel(); 

     viewModel.Posts = await Task.Run(() => 
            db.Posts.Include("Comments") 
            .Include("By").OrderByDescending(o => o.PostedOn) 
            .ToList()); 
     //Return a Partial View which replaces content on the View 
     //only if the Request is an Ajax Request 
     if (Request.IsAjaxRequest()) 
     { 
      viewModel.Posts = viewModel.Posts 
       .Where(a => a.Title.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0 
       || a.Message.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0 
       ); 

      return PartialView("_Posts", viewModel.Posts); 
     } 

     return View(viewModel); 
    } 

Надеюсь, это поможет кому-то.