Как передать значение <div>другому контроллеру в ASP.Net MVC?

Question

У меня Дом и Клиент Контроллер

Домашний контроллер

public ActionResult Index()
{
    return view()
}

Index.cshtml

<div class="card" data-csid="jieg83ndks90">

</div>

Когда пользователь нажимает на div выше, он будет перенаправлен на Customer.cshtml на CustomerController , а также должен получить значение div data-csid (jieg83ndks90)

CustomerController

public ActionResult Customer()
{
    return view()
}

Примечание. Я хочу перенаправить из index.cshtml в Customer.cshtml и передать значение (jieg83ndks90) также в Customer.cshtml

Answer 1

Вы спрашиваете несколько вещей:

• Как обрабатывать событие нажатия в JavaScript
• Как получить значение data- * в JavaScript
• Как перенаправить в JavaScript
• Как включить значение в URL
• Как получить значение в методе действия

Давайте начнем с первого, события щелчка. Поскольку вы только начинаете работать с ASP.NET MVC, я предполагаю, что jQuery включен в шаблон проекта. Таким образом, событие щелчка может выглядеть примерно так:

$('div.card').on('click', function () {

});

Это вызовет эту (в настоящее время пустую) функцию каждый раз, когда пользователь нажимает на <div> с помощью class="card". В этой функции вы хотите получить значение атрибута data- * <div>, по которому щелкнули:

$('div.card').on('click', function () {
    let csid = $(this).data('csid');
});

Теперь вы хотите перенаправить на URL и включить это значение. Существует несколько способов создания URL-адреса в ASP.NET MVC, и некоторые из них имеют интересные обходные пути при использовании в JavaScript. Но давайте будем простыми. Используйте помощник Url.Action и не забудьте заключить его в кавычки в JavaScript, так как это строка:

$('div.card').on('click', function () {
    let csid = $(this).data('csid');
    let url = '@Url.Action("Customer", "Customer")';
});

(Вам предлагается просмотреть источник страницы в своем браузере, чтобы увидеть, что это сгенерировало.) И вы можете добавить значение в строку запроса сгенерированного URL:

$('div.card').on('click', function () {
    let csid = $(this).data('csid');
    let url = '@Url.Action("Customer", "Customer")' + '?csid=' + csid;
});

Затем используйте этот URL для перенаправления пользователя :

$('div.card').on('click', function () {
    let csid = $(this).data('csid');
    let url = '@Url.Action("Customer", "Customer")' + '?csid=' + csid;
    window.location.href = url;
});

Важное примечание: Разница может показаться несущественной, но понимание семантики происходящего очень важно . Вы не перенаправляете пользователя на Customer.cshtml. Вы перенаправляете пользователя к методу действия на контроллере. Когда этот метод действия возвращает представление, то представление будет Customer.cshtml.

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

public ActionResult Customer(string csid)
{
    return View();
}

Теперь, очевидно, возникает вопрос ... Что вы планируете сделать с этим значением csid. На этом ваш контекст вопроса заканчивается. На данный момент вы перенаправили пользователя со значением, как вы используете это значение зависит от вас. Если вы хотите передать его из действия контроллера в представление, тогда стандартным подходом будет установить значение для модели, которую вы передаете в представление. Например:

public ActionResult Customer(string csid)
{
    var model = new SomeViewModel { CSID = csid };
    return View(model);
}

Тогда, по вашему мнению, вы должны поместить эту строку вверху, чтобы связать эту модель:

@model SomeViewModel

Оттуда вы можете получить доступ к Model.CSID везде, где хотите.