JQuery post back dosent wrok

Question

User739135361 posted

I have a drop down on a page, on selected I want to navigate view. If iam doing it with a button on the page, select a value from drop down and then click on the button, it works fine.

In another case when I use Jquery to Post to same action method on drop down change, debugging goes to the view but View is not renderd. Instead I get error. However, debugging shows status as OK. Though I get entire html, thats not rendered.  

<select id="ddlProductDetails" name="ProductDetails" class="dropdown" style="width:15em;">                      

                        <option value="0">Select</option>                     

                           @{                          

                                 foreach (var p in ViewBag.ProductDetails)

                                            {                               

                                              <option value="@p.ProductDetailID">@p.ProductDetails</option>                         

                                           }                     

                               }                  

</select>

<script type="text/javascript">

$(document).ready(function () {                

$("#ddlProductDetails").change(function () {                   

             if ($("#ddlProductDetails option:Selected").text() != "Select") {                 

                            $.aja:@{

                               type: "POST",                     

                            url: '@Url.Action("Index")',                     

                               dataType:'json',                     

                              data: { ProductID: $("#ddlProduct").val() },                     

                              success: function (data) {                          alert(data.msg);                      },                     

                             error: function (err) {                          alert(err.Status)                      }                 

         });             

}         

});     

});

</scipt>

public ActionResult Index (FormCollection fc,  string submit)         

{                

                 switch (submit)             

           {                  case "GetProduct":                      

                    return RedirectToAction("Product", new { id = Convert.ToInt32(fc["ProductID"]) });                     

                                  default:                      

                   return RedirectToAction("Product", new { id = Convert.ToInt32(fc["ProductID"]) });       

           // The Products   controller retuns a data to the view by getting values based on ID.

       }             

    return View();         

}

Answer 1

User475983607 posted

There are several fundamental design issues.  jQuery AJAX does not automatically refresh the browser.  The HTTP response is returned in the AJAX success handler.  You have to write code to update the browser.

You've defined the AJAX function to expect a JSON return type but the Action method can return a View.  A View renders HTML not JSON.  Plus you have redirects and it is not clear if the redirects return JSON or HTML.

Keep in mind the switch is irrelevant as it will always redirect to the Product action.  Your AJAX function should invoke the Product Action rather than relying on a redirect.  This will simplify your code.

Answer 2

User-17257777 posted

Hi N1ZAM,

From your description, I am not sure if you want to refresh the entire page or partially refresh the current page after the request. I will provide you with two different solutions separately.
1. refresh the entire page
In this case, you need to render a dropdown list and the specific content of the selected product on the server side.
Testing with the following codes:

Controller:

public ActionResult Index(string id)
        {
            Product product = new Product();
            List<Product> products = new List<Product>();
            products.Add(new Product { ProductDetailID = "1", ProductDetails = "AAA" });
            products.Add(new Product { ProductDetailID = "2", ProductDetails = "BBB" });
            products.Add(new Product { ProductDetailID = "3", ProductDetails = "CCC" }); 

            List<SelectListItem> prolist = new List<SelectListItem>();
            prolist.Add(new SelectListItem() { Text = "Select", Value = "0" });
            foreach (var pro in products)
            {
                if (pro.ProductDetailID == id)
                {
                    prolist.Add(new SelectListItem() { Text = pro.ProductDetails, Value = pro.ProductDetailID, Selected = true });
                    product = pro;
                }
                else
                {
                    prolist.Add(new SelectListItem() { Text = pro.ProductDetails, Value = pro.ProductDetailID, Selected = false });
                }
            }
            ViewBag.Product = product;
            ViewBag.Selectlist = prolist;
            return View();

        }

View:

@Html.DropDownList("prolist", ViewBag.Selectlist as List<SelectListItem>)

<div id="content">
    @ViewBag.Product.ProductDetails
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("[name = prolist]").change(function (v) {
            console.log(v.target.value);
            window.location = "http://localhost:64766/Event/Index?id=" + id;
        })

    })

</script>

2. partially refresh the current page
In this case, the server returns the data, you need to render on the client side.
Testing with the following codes:

Controller:

public static List<Product> products = new List<Product>();
        public ActionResult Index(string id)
        {
            Product product = new Product();
            products.Add(new Product { ProductDetailID = "1", ProductDetails = "AAA" });
            products.Add(new Product { ProductDetailID = "2", ProductDetails = "BBB" });
            products.Add(new Product { ProductDetailID = "3", ProductDetails = "CCC" });
            
            ViewBag.ProductDetails = products;
            return View();

        }

        public ActionResult PartialProduct(string id)
        {
            Product product = new Product();
            foreach (var pro in products)
            {
                if (pro.ProductDetailID == id)
                {
                    product = pro;
                }
            }
                
            return PartialView("PartialProduct", product);
        }

View:

<select id="ddlProductDetails" name="ProductDetails" class="dropdown" style="width:15em;">
    <option value="0">Select</option>
    @{
        foreach (var p in ViewBag.ProductDetails)
        {
            <option value="@p.ProductDetailID">@p.ProductDetails</option>
        }
    }
</select>


<div id="content">
    
</div>


<script type="text/javascript">
    $(document).ready(function () {
        $("#ddlProductDetails").change(function () {
            if ($("#ddlProductDetails option:Selected").text() != "Select") {
                var id = $(this).val();
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("PartialProduct ")',
                    data: { id:id },
                    success: function (data) {
                        $("#content").html(data);
                    },
                    error: function (err) { alert(err.Status) }
                })
            }
        })
    })
</script>

Best Regards,

Jiadong Meng.