Textbox does not update with values ASP.Net MVC

Shyla
 
on May 24, 2022 04:18 AM
Sample_625739.zip
478 Views

Hi,

Please can someone assist with the following. The view does not receive the values from the script at all. The function does receive values correctly. The textbox and dropdown get called using the id and not generated with Razor.

Thanks

View 

<div id="Textbox"></div> // This textbox already exist and cannot use Razor
<div id="DropDown"></div> // This dropdown already exist and cannot use Razor

 

Script

// The response receives the value from the controller
// The issue is that the view is not getting updated with the values from the script
$(function (response) {
		$( url: '@Url.Action("Index", "Home")',
		$('#Textbox').html(response.TextboxText); // do receive the correct values
		$('#DropDown').html(response.DropDownText); // do receive the correct values
    });
});

 

Model

public class Models
{
    public string TextboxText { get; set; }

    public string DropDownText { get; set; }
}

 

Controller

public ActionResult Index(Models models)
{
	// Code that recieves data and add it to textValue
	
	if (textName == "SomeTextboxText")
	{
		models.TextboxText = textValue;
	}
	if (textName == "SomeDropDownText")
	{
		models.DropDownText = textValue;
	}
	return Json(models);
}

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 24, 2022 04:29 AM

Hi Shyla,

Refer below example.

Model

public class DataModel
{
    public string TextboxText { get; set; }
    public string DropDownText { get; set; }
}

Controller

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

    [HttpPost]
    public ActionResult Index(DataModel models)
    {
        models.TextboxText = "SomeTextboxText";
        models.DropDownText = "SomeDropDownText";

        return Json(models);
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div id="Textbox"></div>
    <div id="DropDown"></div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $.post("/Home/Index", { TextboxText: "", DropDownText: "" },
                function (response) {
                    $('#Textbox').html(response.TextboxText);
                    $('#DropDown').html(response.DropDownText);
                }
            );
        });
    </script>
</body>
</html>

Output

SomeTextboxText