Bind TextBoxes on Button Click using jQuery AJAX in ASP.Net MVC

Last Reply 15 days ago By dharmendr

Posted 17 days ago

What i want is my controller action method should fire thrugh javascript function on input type submit button click event and bind textbox with new values.

	// My Controller
	[HttpPost]
        public ActionResult GetSalary(FormCollection formCode)
        {
	    	// Getting form values from view
            string salCode = formCode["vc_Salary_Code"].ToString();
            string empId = formCode["vc_Employee_ID"].ToString();
            
	    	// execute query and get data from database
            var salPosList = sdm.accountSalaryMaster.SqlQuery("query").ToList();

            // Some Calculations and assign values to the variable

	    	Object[] salaryTypes = new Object[] { amtAllowance, amtBack, amtEmi, amtOvertime, amtLeave, amtDeduction, totalAdd, totalSub, netSalary };
            return Json(salaryTypes, JsonRequestBehavior.AllowGet);
        }

 

            <script>
	        function GetSalary() {
	            var id = $('#EmployeeID').val();
	            var cod = $('#SelectSalaryCode').val();
	            $.ajax({
	                url: '/Account/GetSalaryDetails',
	                type: "GET",
	                dataType: "JSON",
	                data: { empId: id, salCode: cod },
	                success: function (salaryTypes) {
	                    $('#dc_Salary_Allowances').val(salaryTypes.amtAllowance),
	                    $('#dc_Back_Due').val(salaryTypes.amtBack)
	                }
	            });
	        }
	    </script>

 

        // My View
    	@using (Html.BeginForm("SalaryPayment", "Account", FormMethod.Post))
    	{
			@Html.Editor("vc_Employee_ID", new { htmlAttributes = new { @class = "form-control", @id = "EmployeeID", @placeholder = "Employee ID..." } })
	            
			@Html.DropDownList("vc_Salary_Code", null, "Select Salary Code...", new { @class = "form-control", @id = "SelectSalaryCode" })
				
			<input type="submit" class="btn btn-sm btn-success" onclick="GetSalary();" value="Get" style="width:70px" />
				
			@Html.Editor("dc_Salary_Allowances", new { htmlAttributes = new { @class = "form-control", @id = "SalaryAllowances", @placeholder = "Allowances..." } })
				
			@Html.Editor("dc_Back_Due", new { htmlAttributes = new { @class = "form-control", @id = "BackDue", @placeholder = "Back Due..." } })

	}

 

Posted 15 days ago

Hi Shud,

Check the below example.

For more details on passing data using FormCollection refer below article.

Submit (POST) FormData to Controller using jQuery AJAX in ASP.Net MVC

Controller

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

    [HttpPost]
    public ActionResult GetSalary(FormCollection formCode)
    {
        string empId = formCode["EmployeeId"].ToString();
        string salCode = formCode["SalaryCode"].ToString();

        //var salPosList = sdm.accountSalaryMaster.SqlQuery("query").ToList();
        int amtAllowance = 10;
        int amtBack = 10;
        int amtEmi = 10;
        int amtOvertime = 5;
        int amtLeave = 2;
        int amtDeduction = 1;
        int totalAdd = 5;
        int totalSub = 3;
        int netSalary = 32;

        Object[] salaryTypes = new Object[] { amtAllowance, amtBack, amtEmi, amtOvertime, amtLeave, amtDeduction, totalAdd, totalSub, netSalary };
        return Json(salaryTypes, JsonRequestBehavior.AllowGet);
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 GetSalary() {
            var id = $('#vc_Employee_ID').val();
            var cod = $('#SelectSalaryCode').find('option:selected').val();
            var formData = new FormData();
            formData.append("EmployeeId", id);
            formData.append("SalaryCode", cod);
            $.ajax({
                url: '/Home/GetSalary',
                type: "POST",
                contentType: false,
                processData: false,
                dataType: "JSON",
                data: formData,
                success: function (salaryTypes) {
                    $('#dc_Salary_Allowances').val(salaryTypes[0]);
                    $('#dc_Back_Due').val(salaryTypes[1]);
                }
            });
        }
    </script>
</head>
<body>
    <div>
        <%using (Html.BeginForm("Index", "Home", FormMethod.Post))
          {%>
        <%:Html.Editor("vc_Employee_ID", new { htmlAttributes = new { @class = "form-control", @id = "EmployeeID", @placeholder = "Employee ID..." } })%>
        <%:Html.DropDownList("vc_Salary_Code", new List<SelectListItem> { 
                                                    new SelectListItem { Text = "1", Value = "1" }, 
                                                    new SelectListItem { Text = "2", Value = "2" } }
                                            , "Select Salary Code..."
                                            , new { @class = "form-control", @id = "SelectSalaryCode" })%>
        <input type="submit" class="btn btn-sm btn-success" onclick="GetSalary();return false;"
            value="Get" style="width: 70px" />
        <%:Html.Editor("dc_Salary_Allowances", new { htmlAttributes = new { @class = "form-control", @id = "SalaryAllowances", @placeholder = "Allowances..." } })%>
        <%:Html.Editor("dc_Back_Due", new { htmlAttributes = new { @class = "form-control", @id = "BackDue", @placeholder = "Back Due..." } })%>
        <% } %>
    </div>
</body>
</html>

Screenshot