CODEWITHSUNDEEP
c#ajaxasp.net-mvcasp.net-mvc-3jsonresult
kez
kez

Reputation: 2313

sending value of model property as an ajax parameter

I have following form in my view-page 

@using (Html.BeginForm())
{
   @Html.EditorFor(model => model.Product_ID)

   <input id="idd" type="file" class="file">

   // form sumbit button
   <input type = "submit" value="Create" /> 

}

I want to send above inserted Product_ID as ajax object route value before click the submit button of this form.for that I created it like this product_ID = Model.Product_ID but this product_ID getting null.

$('#idd').click(function () {

    $.ajax({
        url: '@Url.Action("CreateDirectory", "Home",new { product_ID = Model.Product_ID })',
        type: "POST",

controller 

    [HttpPost]
    public JsonResult CreateDirectory(string product_ID)
    {
      ...........
    }

EDIT

using alert inside above script I try to show that Product_ID

alert('@Model.Product_ID');

same results not showing value

Upvotes: 1

Views: 5318

Answers (4)

Shyju
Shyju

Reputation: 218852

Your code should work fine.

@model ProductInfoVM
@using (Html.BeginForm())
{
    @Html.EditorFor(model => model.Product_ID)

}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<input id="idd" type="file" class="file">

<script type="text/javascript">

    $(function() {

        $('#idd').click(function() {

            $.ajax({
                url: '@Url.Action("Index", "Home", new {productID = @Model.Product_ID})',
                type: "POST"
            });
        });

    })

</script>

Assuming you have an HttpPost action method which accepts the productID 

[HttpPost]
public ActionResult Index(string productId)
{
   // to do : do something
}

The only reason i can think of as the reason of NULL coming is, Your Model.Product_ID itself is NULL when you render the page. So i would look into your GET action method to see whether you are properly setting the Product_ID property value of your view model.

Upvotes: 0

user3559349
user3559349

Reputation:

@Url.Action() is razor code which is evaluated on the server before its sent to the view so if the initial value of Model.Product_ID is null then your code will render just url: '/Home/CreateDirectory'. Changing the value in the textbox once it has been generated will not update the value of url.

Instead use the ajax data option to pass the value of the textbox

$('#idd').click(function () {
    $.ajax({
        url: '@Url.Action("CreateDirectory", "Home")', // modify
        data: { product_ID: $('#Product_ID').val() }, // add this
        type: "POST",

Upvotes: 3

Jose Rocha
Jose Rocha

Reputation: 1115

In this line you are giving to product_ID the initial value in which the model is render in page, so it is probably null

url: '@Url.Action("CreateDirectory", "Home",new { product_ID = Model.Product_ID })'

try this instead

url: '@Url.Action("CreateDirectory", "Home")' + '?product_ID=' + $("Product_ID").val()

EDIT Maybe you need this too 

 [HttpPost]
public JsonResult CreateDirectory([FromUri]string product_ID)
{
  ...........
}

Upvotes: 2

Gene R
Gene R

Reputation: 3744

its because your action accept only [HttpPost] data and you are sending variable in query string [HttpGet]

@Url.Action("CreateDirectory", "Home",new { product_ID = Model.Product_ID })

url is next:

~/Home/CreateDirectory?product_ID = ....

Replace [HttpPost] attribute with [HttpGet], or just remove it

and set ajax {type: "GET"}

Alternatively:

$.ajax({
        url: '@Url.Action("CreateDirectory", "Home")',
        type: "POST",
        data: { product_ID: '@(Model.Product_ID)' }

Or:

$.ajax({
        url: '@Url.Action("CreateDirectory", "Home")',
        type: "POST",
        data: { product_ID: $('#Product_ID').val() }

Upvotes: 2

Related Questions