CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4asp.net-mvc-3
Satish Marni
Satish Marni

Reputation: 1

How to Get HTML drop down list value from View to controller in MVC?

Small help required

1) I have created an html Dropdown in MVC view like this

<select name="Associateddl" id="Associateddl"></select>

2)I am appending the options to the dropdownlist using Jquery Ajax like

$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'customservice.asmx/getallmember',
dataType: 'JSON',
success: function (response) {
var getData = JSON.parse(response.d);
console.log(getData.length);
if (getData.length > 0) {
$("#msg").hide();
$.each(getData, function (i, item) {
var optiontext = "";
optiontext = "<option value='" + item.Aid + "'>" + item.AMail + "</option>";
$("#Associateddl").append(optiontext);
});
}
else {
$("#msg").append("<p style='color:red'><b>Currently there are no members ,Please Add !!</b></p>");
}
},
error: function (err) {
//alert(err);
}
});

3)Now i want to retrive the dropdown selected value to controller from View.

My Model:

public class Event
{
[DisplayName("Event Name")]
[Required(ErrorMessage ="Event Name is Mandatory...")]
public string Eventname { get; set; }
[DisplayName("Event Year")]
[Required(ErrorMessage ="Enter the Year...")]
public int Year { get; set; }
[DisplayName("Associate ID")]
[Required(ErrorMessage ="Associate ID is required...")]
public string Associateddl { get; set; }
}

My Controller:

[HttpPost]
public ActionResult Index(Event eve)
{

string ename = eve.Eventname;
int eyr = eve.Year;
string eassociate = eve.Associateddl; //Here i want to retrive the dropdownselected Value

return View();
}

Please help me to get the Html dropdown seleted value to Controller from View.

Upvotes: 0

Views: 852

Answers (1)

kblau
kblau

Reputation: 2107

Here is an example on how you can see the value of the ddl in the controller. I will get you an ASP.NET Fiddle you can click on that will host the solution.

web service

[System.Web.Script.Services.ScriptService]
public class Service1 : System.Web.Services.WebService
{
    [WebMethod]
    public string getallmember()
    {
        var drop2 = new List<SelectListItem>();
        SelectListItem sli1 = new SelectListItem { Text = "MoreOptions1", Value = "1" };
        SelectListItem sli2 = new SelectListItem { Text = "MoreOptions2", Value = "2" };
        drop2.Add(sli1);
        drop2.Add(sli2);
        //GET NewtonSoft
        var json = JsonConvert.SerializeObject(drop2);
        return json;
    }

Controller

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Tut118(string Associateddl)
    {
        //put breakpoint here
        return View();
    }

    public ActionResult Tut118()
    {
        return View();
    }

View

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut118</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#theButton").click(function () {
               $.ajax({
                    type: "Post",
                    url: "customservice.asmx/getallmember",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        $("#Associateddl").empty();
                        var theData = JSON.parse(response.d);
                        $.each(theData, function (i, anObj) {
                            $("#Associateddl").append($('<option>').text(anObj.Text).attr('value', anObj.Value));
                        });
                    }
                    ,
                    error: function (request, status, error) {
                        alert(error);
                    }
                });
            })
        })
    </script>
</head>
<body>
    <div>
        @using (Html.BeginForm())
        {
            <input type="button" id="theButton" value="click to get ddl" />
            <select name="Associateddl" id="Associateddl"></select>
            <input type="submit" value="click after selecting ddl" />
        }

    </div>
</body>
</html>

Upvotes: 1

Related Questions