CODEWITHSUNDEEP
jqueryajaxasp.net-mvcrazor
Henrik
Henrik

Reputation: 1807

jquery ajax GET pass properties from razor view model

In the editors in view i enter both name and 0 as socialsecuritynumber but wrong method in controller is called, that one with only name as parameter and the value of that is "0", that will say the value of socialsecuritynumber editor. What am I doing wrong ?

EDIT: When i check what url that is invoked in chrome developer tools it says: localhost:51446/Person//0

PersonViewModel

public string Name { get; set; }
public int SocialSecurityNumber { get; set; }

PersonController

[HttpGet]
[Route("Person")]
public ActionResult Index()
{
   return View();
}

[HttpGet]
[Route("Person/{name}")]
public JsonResult GetProduct(string name)
{
   var person = new PersonViewModel { Name = id, SocialSecurityNumber = 12345678 };
   return Json(person, JsonRequestBehavior.AllowGet);
}

[HttpGet]
[Route("Person/{name}/{socialSecurityNumber}")]
public JsonResult GetProduct(string name, int socialSecurityNumber)
{
   var person = new PersonViewModel { Name = name, SocialSecurityNumber = 12345678 };
   return Json(person, JsonRequestBehavior.AllowGet);
}

Razor View

@model Test.PersonViewModel


<div class="row highlight col-md-10 col-md-offset-2" id="SearchPerson">
   <div class="col-md-1">@Html.LabelFor(model => model.Name):</div>
   <div class="col-md-2">@Html.EditorFor(model => model.Name, new { htmlAttributes = new { placeholder = "Enter name" } })</div>
   <div class="col-md-1">@Html.LabelFor(model => model.SocialSecurityNumber):</div>
   <div class="col-md-2">@Html.EditorFor(model => model.SocialSecurityNumber, new { htmlAttributes = new { placeholder = "Enter ssn" } })</div>
   <button type="button" class="btn btn-default" id="btnSearchPerson" </button>
</div>

<script type="text/javascript">

   $(function() {
      $('#btnSearchPerson').on('click', function () {
         var $this = $(this);
         $this.button('loading');

         $.ajax({
            type: 'GET',
            dataType: 'json',
            url: 'Person/' + '@Model.Name' + '/' + @Model.SocialSecurityNumber,
            success: function (data) {
                $('#SearchPerson').html(data);
            },
            error: function (xhr, ajaxOption, thorwnError) {
                console.log("Error")
            },
         });
    });
</script>

Upvotes: 1

Views: 976

Answers (1)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

The problem here is you are setting the parameter in ajax url from razor server side variable, so after modifying the values in textboxes, they would'nt get updated in the javascript call, as the razor variable will get evaluated at view render time, so you need to read the values just before sending the ajax call via jquery.

you need to change following :

url: 'Person/' + '@Model.Name' + '/' + @Model.SocialSecurityNumber,

to:

url: 'Person/' + $("#Name").val() + '/' + $("#SocialSecurityNumber").val(),

The 0 was getting posted because for int the default value in 0, so it got posted but for string nothing was posted in the url.

Upvotes: 2

Related Questions