FILL HTML.EDITFOR FIELDS ON BUTTON CLICK IN ASP.NET MVC
-
Dear Friends I am new MVC world & working in a project. I want to fill some html.editfor fields on a button click. My tried the given below codes: Controller action:
[HttpPost]
public JsonResult GetRecordById(string id)
{
var record = dc.TABLE1.FirstOrDefault(x => x.PART_NO == id);
var result = new
{
Name = record.PARTI,
Type = record.TYPE
};
return Json(result, JsonRequestBehavior.AllowGet);
}VIEW:
<script type="text/javascript">
$(function () {
$("#txtParti").autocomplete({
source: '@Url.Action("GetParti")'
});
});
$(function () {
$("#txtPtno").autocomplete({
source: '@Url.Action("GetPtno")'
});
});
$('#BTNFET').onclick(function (fetrec) {
var recordId = this.value;
$.post('@Url.Action("GetRecordById")',
{
"id": recordId
},
function (data) {
$("#txtParti").val(data.Name);
$("#Type").val(data.Type);
});
});
</script><input type="button" id="BTNFET" onclick="fetrec();" />
@Html.EditorFor(model => model.PARTI, new { htmlAttributes = new { @class = "form-control", @id = "txtParti", @placeholder = "PART NAME" } })
@Html.EditorFor(model => model.PART_NO, new { htmlAttributes = new { @class = "form-control", @id = "txtPtno", @placeholder = "PART NO" } })
@Html.EditorFor(model => model.TYPE, new { htmlAttributes = new { @class = "form-control", @id = "Type", @placeholder = "ITEM TYPE" } })On the above codes Auto complete part working pefectly, Button click not working. So, friends please help me in this regard.
-
Dear Friends I am new MVC world & working in a project. I want to fill some html.editfor fields on a button click. My tried the given below codes: Controller action:
[HttpPost]
public JsonResult GetRecordById(string id)
{
var record = dc.TABLE1.FirstOrDefault(x => x.PART_NO == id);
var result = new
{
Name = record.PARTI,
Type = record.TYPE
};
return Json(result, JsonRequestBehavior.AllowGet);
}VIEW:
<script type="text/javascript">
$(function () {
$("#txtParti").autocomplete({
source: '@Url.Action("GetParti")'
});
});
$(function () {
$("#txtPtno").autocomplete({
source: '@Url.Action("GetPtno")'
});
});
$('#BTNFET').onclick(function (fetrec) {
var recordId = this.value;
$.post('@Url.Action("GetRecordById")',
{
"id": recordId
},
function (data) {
$("#txtParti").val(data.Name);
$("#Type").val(data.Type);
});
});
</script><input type="button" id="BTNFET" onclick="fetrec();" />
@Html.EditorFor(model => model.PARTI, new { htmlAttributes = new { @class = "form-control", @id = "txtParti", @placeholder = "PART NAME" } })
@Html.EditorFor(model => model.PART_NO, new { htmlAttributes = new { @class = "form-control", @id = "txtPtno", @placeholder = "PART NO" } })
@Html.EditorFor(model => model.TYPE, new { htmlAttributes = new { @class = "form-control", @id = "Type", @placeholder = "ITEM TYPE" } })On the above codes Auto complete part working pefectly, Button click not working. So, friends please help me in this regard.
It looks like you have more of a JavaScript issue than anything else. First, remove the onclick handler for the HTML tag, it's extraneous and basically binds a null event to the button I don't see a function fetrec defined anywhere, just an anonymous event handler.
Now for the JS. I'm not 100% sure about best practices with jQuery, and $.ajax() might be a better route, but we'll roll with what you have for the moment:
$('#BTNFET').onclick(function (e) {
$.post('@Url.Action("GetRecordById")',
{
"id": e.target.value
},
function (data) {
$("#txtParti").val(data.Name);
$("#Type").val(data.Type);
});
});Now, in this context the 'this' object should be the event initiator, but that's not a guarantee. The handler will automatically be passed the event as an argument, though, and we can use that to hook the calling HTML element via the 'target' property. This has the benefit of not leaning on 'this' and therefore not needing to add a new variable into the mix.
-
It looks like you have more of a JavaScript issue than anything else. First, remove the onclick handler for the HTML tag, it's extraneous and basically binds a null event to the button I don't see a function fetrec defined anywhere, just an anonymous event handler.
Now for the JS. I'm not 100% sure about best practices with jQuery, and $.ajax() might be a better route, but we'll roll with what you have for the moment:
$('#BTNFET').onclick(function (e) {
$.post('@Url.Action("GetRecordById")',
{
"id": e.target.value
},
function (data) {
$("#txtParti").val(data.Name);
$("#Type").val(data.Type);
});
});Now, in this context the 'this' object should be the event initiator, but that's not a guarantee. The handler will automatically be passed the event as an argument, though, and we can use that to hook the calling HTML element via the 'target' property. This has the benefit of not leaning on 'this' and therefore not needing to add a new variable into the mix.
Nice answer +5
hi