Pass DropDownList selected value with Table row details to Controller using jQuery AJAX in ASP.Net MVC

Rockstar...

SOLVED CLOSED ACTIVE ANSWERED
User: Rockstar8
Posted: on Dec 11, 2018 06:15 AM
Forum: ASP.Net MVC
Answer: 1
Views: 16386
Sample Code: Download

Hi Everone,

I am using a page that displays a HTML table. I want to send the values to controller - This part is working fine

but along with the above table details I want to send a dropdown selected value to the controller page. How to pass the dropdown value along with table data.

    $('#ddcaptical').on("change", function () {
        if ($('#ddcapticaloption:selected').val() === "") {
        $('#divcont').css("display", "none");
     }
     else {
         $('#divcont').css("display", "block");
    }    
    $('#deptid').val($('#ddcaptical option:selected').val());
        var data = $.param($('#tblretant td').map(function () {
        return {
            name: $(this).attr('name'),
            value: $(this).text().trim()
        };
    }));

    debugger;
    $.ajax({
        type: "Post",
        url: /Home/Stugsavedet,
        data: data,
        success: function (result) {
            alert("Success!..");

        }
    });

As you can see I took all my tables values and stored in the value "data" but I need to send the "ddlcaptical" selected value to my controller

I am not using Begin form. the dropdown is outside my form. on dropdown change a ajax jquery will call the method "Stugsavedet".

[HttpPost]
public JsonResult Stugsavedet(RETGE_VM model)
{
    return Json(model);
}

IN RETEGE my dropdown value name is "deptid"

public int deptid{ get; set; }

<div id="divcont"><form>
 <input type="text" id="tb1" name="tbl1"/>
  <table name="tbl1">
   <tr><td><input type="text" name="tb2"/></td></tr>
 </table>
 <table name="tbl2">
   <tr><td><input type="text" name="tb3"/></td></tr>
   <tr><td><input type="text" name="tb4"/></td></tr>
 </table>
</form></div>
@Html.DropDownListFor(model => model.tipo, listItems, "-- Select Status --", new { @id = "ddcaptical"})

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 8

Reply
ANSWER
User: dharmendr
Replied: on Dec 12, 2018 05:59 AM
Report

Hi Rockstar8,

You can add another property to your model class for sending the dropdownlist selected value to the controller.

Check this example. Now please take its reference and correct your code.

Model

public class EmployeeModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Gender { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult Index(EmployeeModel emp)
    {
        int id = emp.Id;
        string name = emp.Name;
        int captical = emp.Gender;
        return Json(emp);
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#ddcaptical').on("change", function () {
                if ($('#ddcaptical option:selected').val() === "") {
                    $('#divcont').css("display", "none");
                }
                else {
                    $('#divcont').css("display", "block");
                }
                var gender = $('#ddcaptical option:selected').val();
                var data = {};
                data.Id = 1;
                data.Name = "Mudassar";
                data.Gender = gender;                
                $.post("/Home/Index", data, function (r) {
                });
            });
        });
    </script>
</head>
<body>
    <%:Html.DropDownListFor(model => model.Gender, new List<SelectListItem> { 
                                                new SelectListItem{Text ="Male",Value="1"},
                                                new SelectListItem{Text ="Female",Value="2"}
                                            }, "-- Select Status --", new { @id = "ddcaptical" })%>
    <br />
    <div id="divcont">
        <form>
        <input type="text" id="tb1" name="tbl1" />
        <table name="tbl1" id="tblretant">
            <tr>
                <td>
                    <input type="text" name="tb2" />
                </td>
            </tr>
        </table>
        <table name="tbl2" id="tblretant">
            <tr>
                <td>
                    <input type="text" name="tb3" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="tb4" />
                </td>
            </tr>
        </table>
        </form>
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Pass DropDownList selected value with Table row details to Controller using jQuery AJAX in ASP.Net MVC

Company

Explore

Follow us

Contact Us