Trying to update a textbox in a partial view

Question

i am trying to update a textbox value in a partial view.in that partial view there is already one field ie one input box which is already bind. i want to update another input box through ajax method without disturbing other field which is already bind. partial view

@model Smart_Mis_CRCW.Models.Ipcell
 <div>
<div>Case Id <input id="Rcid" type="text" style="margin-left:11%" value="@Model.CaseId"/></div><br />
<div>Vendor No<input id="Rvno" type="text" style="margin-left:11%"/><input id="Rval" value="Validate" type="button" style="margin-left:2%" /></div><br />
<div>Vendor Name<input id="Rvname" type="text" style="margin-left:11%" value="@Model.VendorName"/></div></div>

on clicking button validate it will validate value from db and bind the value in the textbox with id Rvname.

ajax view trying like that

$(document).on("click", "#Rval", function (e) {
                var vno=$('#Rvno').val();                
                $.ajax({
                    type:"POST",
                    url:"/Home/Vendorno",
                    data:{ 'id' : vno},
                    //contentType:"application/json; charset=utf-8",
                    datatype:"json",
                    success:function(r){
                        alert(r + " record(s) inserted.Case ID");
                    }
                });
                
            });

how to pass value in controller Vendorno so that it will update value in textbox with id Rvname. Any idea would be appreciated.

Answer 1

how to pass value in controller Vendorno

You can pass the values to your controller as you are already passing, trial and error things are always there because sometimes the contenttype is not actually that you are using to hit the controller or the data is not in correct format which is why the values are not mapped accordingly.

If you are passing only the id to the controller endpoint then I would recommend using application/x-www-form-urlencoded like below:

$(document).on("click", "#Rval", function (e) {
    var vno=$('#Rvno').val();                
    $.ajax({
        "type" : "POST",
        "url" : "/Home/Vendorno?id=" + vno,
        "data" : null,
        "contentType" : "application/x-www-form-urlencoded"
        "success" : function(r){
            alert(r + " record(s) inserted.Case ID");
        }
    });       
});

so that it will update value in textbox with id Rvname

You controller is not responsible for updating anything on the front end so you will have to take care of that on your success method, return the required value from the controller and set that value in the textbox of your choice. ie

$(document).on("click", "#Rval", function (e) {
    var vno=$('#Rvno').val();                
    $.ajax({
        "type" : "POST",
        "url" : "/Home/Vendorno?id=" + vno,
        "data" : null,
        "contentType" : "application/x-www-form-urlencoded"
        "success" : function(r){
            $('#Rvname').val(r); // I assume the "r" in the param is the name being returned from the controller.
        }
    });       
});