Access strongly typed ASP.Net MVC model values in Jquery

Question

I have binded a model to a view and each property in the model has an associated control in the view.

It is a big model and there are multiple controls on the view. User updates data in the view and When he clicks on Save button, the updated model values should be sent to the controller action method. Here I am making AJAX call to the controller method.

As this is strongly typed view, I am checking if there is a possibility to pass the updated model directly instead of accessing the control values.

Please let me know if you need any further information. PFB code that I have tried.

Thanks, Bharath

View code

    @model WebApplication1.Models.PersonModel

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>PersonModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.DateTime, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DateTime, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DateTime, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Company, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Company, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Company, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" id="btnGet" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //window.setInterval(Setinterval, 10000);

            $("#btnGet").click(function () {
                Setinterval();
            });

            function Setinterval() {
                //var request = new PersonModel1();
                //var request = '<%= @Model %>';/// '<%= Model %>';
                var request = @Html.Raw(Json.Encode(Model));
                $.ajax({

                    url: "/ST/SubmitRequest",
                    dataType: "json",
                    contentType: "application/json",
                    type: "POST",
                    data: JSON.stringify(request),
                    success: function (response) {
                        //Setinterval();
                        alert("Done...!");
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            };

        });


</script>

Controller code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class STController : Controller
    {
        // GET: ST
        public ActionResult Index()
        {
            PersonModel pm = new PersonModel() {
                Age = "34",
                Company = "DDDD",
                DateTime = DateTime.Now,
                Name = "XYZ S"
            };
            return View(pm);
        }

        [HttpPost]
        public JsonResult SubmitRequest(PersonModel pm)
        {

            return Json(pm);
        }
    }
}

Answer 1

you are using (Html.BeginForm()), so you can use this code

There's a function that does exactly this:

http://api.jquery.com/serialize/

var data = $('form').serialize();
$.post('url', data);