MVC 3 Ajax.ActionLink что-то понимают

Question

так что я новичок в этом, и у меня есть Ajax.ActionLink, который работает нормально, но не может понять (почему я должен поместить div "linkEdit" в моем представлении списка и в частичном представлении)

так что Ajax.ActionLink в моем виде списка решений (и при выборе решения он получает весь продукт), и он переходит к действию

 [HttpGet]
        [Ajax(true)]
        [ActionName("Index")]
        public ActionResult Index_Ajax(Int32? id)
        {
            // to do  = load the product that solution have 
 return PartialView("SolutionProduct", viewModel);
        }

Ajax.ActionLink

 @Ajax.ActionLink("Select", "Index", "solution",
                      new { id = item.solutionId },
                      new AjaxOptions
                      {
                          HttpMethod = "GET",
                          UpdateTargetId = "linkEdit",
                          InsertionMode = InsertionMode.Replace
                      })|

У меня есть этот div в частичном представлении «SolutionProduct» и в моем представлении списка

<div id="linkEdit">
<table> 
    <tr> 
        <th>Nombre de Producto</th>    
    </tr> 

    @foreach (var item in Model.Productos)
    { 

    <tr > 
        <td> 
            @item.Nombre 
        </td> 
    </tr> 
    } 

</table> 
}
</div>

, поэтому мой вопрос будет таким: почему, если я достану div в моем представлении списка, он не работает?

Answer 1

Я собираюсь поделиться здесь различными примерами использования AJAX в ASP .NET MVC 4.

1) Использовать шаблон интернет-приложения для создания проекта ASP .NET MVC 4 в Visual Studio 2012.

2) В папке Models создайте этот простой класс

public class Person
{
   public string FirstName { set; get; }
}

3) Добавьте следующий код в public class HomeController : Controller

[AcceptVerbs("POST")]
    public bool MethodWithoutParameters()
    {
        bool allow = true;

        if (allow)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

    [AcceptVerbs("POST")]
    public string MethodWithParameters(string id)
    {         
            return id + " i got it, man! ";           
    }

    [AcceptVerbs("GET")]
    public ActionResult GetSomeName()
    {
        var data = new { name = "TestName " };

        return Json(data, JsonRequestBehavior.AllowGet);
    }

    [AcceptVerbs("POST")]
    public ActionResult PerformAction(FormCollection formCollection, Person model)
    {
        model.FirstName += "Well done! Form 1";

        return Json( model.FirstName);
    }

    [AcceptVerbs("POST")]
    public ActionResult PerformAction2(FormCollection formCollection, Person model)
    {
        model.FirstName += "Well don! Form 2";
        return Json(model.FirstName);
    }

    public JsonResult DeleteFile(string fileName)
    {
        var result = fileName + " has been deleted";
        return Json(result, JsonRequestBehavior.AllowGet);
    } 

4) Замените весь код в Index.cshtml со следующим (Возможно, вместо MvcApplication1 вы должны использовать свое настоящее имя приложения ...)

@ model MvcApplication1.Models.Person

@ {ViewBag.Title = "Домашняя страница";} @section featured {}

MethodWithoutParametersMethodWithParameters 'parameter00001'@using (Ajax.BeginForm ("PerformAction", "Home", новые AjaxOptions {InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess = "OnSuccess", OnFailure = "OnFailure"})) {

Этодемонстрационная форма1.

@ Html.LabelFor (model => model.FirstName) @ Html.TextBoxFor (model => model.FirstName, null, new {@class = "labelItem"})}

@ using (Ajax.BeginForm ("PerformAction2", "Home", новые AjaxOptions {InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess = "OnSuccess2", OnFailure = "OnFailure2"})){

Это демонстрационная форма2.

@ Html.LabelFor (model => model.FirstName) @ Html.TextBoxFor (model => model.FirstName, null, new {@class = "labelItem"})}

cat.png Удалить файл

function DeleteFile () {var fn = $ ('# fileNameLabel'). Html ();$ .ajax ({url: "Home / DeleteFile", // проверяем this.href в отладчике dataType: "text json", тип: "POST", data: {fileName: fn}, // передаем аргумент здесь success: function(data, textStatus) {if (data) {if (textStatus == 'success') {$ ('# fileNameLabel'). html (data); $ ('# btnDeleteFile'). hide ();} else {alert('error');}} else {alert ('error');}}});} function OnSuccess (response) {$ ('# form1'). html (response);}

function OnFailure2(response) {
    alert("Error Form 2");
}

function OnSuccess2(response) {
    $('#form2').html(response);
}

function OnFailure(response) {
    alert("Error Form 1");
}

function MethodWithoutParameters() {
    var url = "Home/MethodWithoutParameters";
    $.post(url, function (data) {
        if (data) {
            alert(data);
        } else {
            alert('error');
        }
    });
}

function MethodWithParameters(id) {
    var url = "Home/MethodWithParameters/" + id;
    // alert(url);
    $.post(url, function (data) {
        if (data) {
            alert(data);
        } else {
            alert('error');
        }
    });
}

$(document).ready(function () {
    $.getJSON("Home/GetSomeName",
          null,
       function (data) {
           if (data) {
               $('#UserNameLabel').html(data.name);
           } else {
               alert('error');
           }
       }
      );
}); </script>

5) Убедитесь, что заголовок _Layout.cshtml выглядит как

  <meta charset="utf-8" />
  <title>@ViewBag.Title - My ASP.NET MVC Application</title>
  <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <meta name="viewport" content="width=device-width" />
  @Styles.Render("~/Content/css")
  @Scripts.Render("~/bundles/modernizr")
  @Scripts.Render("~/bundles/jquery")
  <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"

type = "text / javascript">

6) И все должно работать нормально.

Я надеюсь, что все эти образцы помогут вам!

Answer 2

Вы должны поместить div с идентификатором "linkEdit" в ваш список, так как это часть страницы, которая должна быть заменена результатом, возвращаемым ссылкой ajax.

ASP.NET AJAX позволяет веб-приложению асинхронно получать данные с сервера и обновлять части существующей страницы.Это улучшает взаимодействие с пользователем, делая веб-приложение более отзывчивым.

И в этом случае вы используете InsertionMode

 InsertionMode = InsertionMode.Replace

, поэтому вам понадобится div с идентификатором"linkEdit" как в виде списка, так и в частичном представлении.