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

Shud

SOLVED CLOSED ACTIVE ANSWERED
User: Shud
Posted: on Nov 03, 2018 01:37 AM
Forum: Data Controls
Answer: 1
Views: 15971
Sample Code: Download

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..." } })

	}

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

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Nov 05, 2018 12:49 AM
Report

Hi Shud,

Check the below example.

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

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

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

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

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

Company

Explore

Follow us

Contact Us