Как объявить объект jquery, используя модель в asp. net mvc?

Question

Я пытаюсь передать объект из моего вида в контроллер, используя jquery после нажатия кнопки. Это работает, если я создаю в jquery объект, который соответствует моему объекту модели, но я надеялся, что смогу как-то объявить объект jquery, используя мой существующий класс в моей модели.

Вот мой код для его создания работать с отдельным jquery объектом, который соответствует моей модели:

контроллер

using System.Web.Mvc;

namespace TestNs
{
    public class HomeController : Controller
    {
        public ActionResult Index(TestModel m)
        {
            return View();
        }

        public ActionResult Test(TestModel m)
        {
            return RedirectToAction("Index", "Home", m);
        }
    }
}

модель

namespace TestNs
{
    public class TestModel
    {
        public string Name { get; set; }

        public string Location { get; set; }

    }

}

просмотр

@using TestNs;
@model TestModel
@{
    Layout = null;
}

<p id="name">Bill</p>
<p id="location">NY</p>

<button type="button" class="button" id="add-button">Add</button>

<script src="~/Scripts/jquery-3.4.1.js"></script>

<script>

    $(document).on("click", "#add-button", function () {

        var url = "@Url.Action("Test","Home")";

        var m = { Name: "", Location: "" }; //how to declare this using TestModel????

        m.Name = $('#name').html();

        m.Location = $('#location').html();

        $.post(url, m, function(res){

        });

    });

</script>

Answer 1

Я решил сделать это. В основном я пытаюсь передать модель или объект между контроллером и представлением различными способами. Ключевая часть была @ Html .Raw (Json .Encode (Модель)). Это позволяет вам объявить объект javascript, используя класс вашей модели. Суть в том, чтобы иметь возможность легко передавать данные, не превращая их в беспорядок. Просто используйте один класс.

Здесь я создаю объект с классом TestModel с 2 свойствами Name и Location. Затем я передаю его из метода действия Index в View, используя бритву MVC. Затем, если вы нажмете кнопку «Сделать что-то», я объявлю объект javascript, используя тот же TestModel, переназначим значения и передам его методу действия DoSomething с сообщением ajax. Затем метод действия DoSomething передает TestModel обратно к виду в методе ajax jquery.

контроллер

using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace TestNs
{

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            TestModel tm = new TestModel();
            tm.Name = "Suzie";
            tm.Location = "Mongolia";
            return View(tm);
        }

        [HttpPost]
        public ActionResult DoSomething(TestModel tm)
        {
            string strJson = new JavaScriptSerializer().Serialize(tm);
            return Json(strJson, JsonRequestBehavior.AllowGet);
        }
    }
}

вид

@using TestNs;
@model TestModel
@{
    Layout = null;
}

<p id="name1">@Model.Name</p>
<p id="location1">@Model.Location</p>

<br />
<br />

<p id="name2">Bill</p>
<p id="location2">NY</p>

<button type="button" id="do-something">Do Something</button>

<script src="~/Scripts/jquery-3.4.1.js"></script>

<script>

    $(document).on("click", "#do-something", function () {

        //declare tm object using TestModel class
        var tm = @Html.Raw(Json.Encode(Model));

        //reassign tm object properties for whatever reason
        tm.Name = $('#name2').html();
        tm.Location = $('#location2').html();

        //post values to action method
        $.ajax({
            url: "/Home/DoSomething",
            type: "POST",
            data: JSON.stringify(tm),
            contentType: 'application/json; charset=utf-8',

            //return tm from action method
            success: function (response) {

                var tm = $.parseJSON(response);

                alert(tm.Name + " " + tm.Location);
            },
            error: function (response) {
                alert("error!");
            }
        });

    });

</script>

модель

namespace TestNs
{
    public class TestModel
    {
        public string Name { get; set; }
        public string Location { get; set; }

    }

}