locked
Value of html Text column is not get updated from javascript , Please help RRS feed

  • Question

  • User-1355965324 posted

    I have the following HTML

    @model MTS.Models.EmpDocumentModel
    
    <input type="text" name="Claim" class="form-control" id="TxtClaim" asp-for="Claim" data-role="text" disabled />
    <script>
        $(document).ready(function () {
        SetLicense();
    
    }
      function SetLicense()
        {
        var url = '@Url.Action("GetLicense", "EmpDoc")';
        $.post(url, $('form').serialize(), function (view) {
                $("#TxtClaim").val(view.Claim);// The value TxtClaim should be updated from GetLicense. But not working 
            });
    
    
    }
    </script


    public IActionResult GetLicense(EmpDocumentModel data)
            {
              EmpDocumentModel doc = new EmpDocumentModel();
              data.Claim = "TestClaim";  // This value should be updated in my html view
              return Json(data);
    
            }

    Wednesday, March 11, 2020 10:04 AM

Answers

  • User475983607 posted

    polachan

    Please can you advise any free debug tool for asp.net core

    Your original code is incomplete and has syntax errors.  IMHO, your approach to get help is lazy and error prone because the community has to fill in the blanks.  It's best if you provide sample code that illustrates the problem; Code the community can easily copy and paste.  Just about every post, the community recommends opening the browser's dev tools and simply viewing the request/response.  Yet you are still using alert().  This indicates you are ignoring this advise.    Anyway, the issue has to do with case sensitively which is very clear in Dev Tools.  Below is the code I came up by filling in the missing bits from your original snippet.  At some point you'll need to learn how to debug and troubleshoot.

    @model MvcDemo.Models.EmpDocumentModel
    @{
        ViewData["Title"] = "Home Page";
    }
    
        <form>
            <input type="text" name="Claim" class="form-control" id="TxtClaim" asp-for="Claim" data-role="text" disabled />
        </form>
    
    
    @section scripts {
        <script>
    
            $(document).ready(function () {
                SetLicense();
            });
            
            function SetLicense()
            {
                var url = '@Url.Action("Index", "Home")';
                $.post(url, $('form').serialize(), function (view) {
                    console.log(view);
                    $("#TxtClaim").val(view.claim);
                });
            }
    
        </script>
    }
    
        public class EmpDocumentModel
        {
            public string Claim { get; set; }
        }

    From the console in Dev Tools.

    {claim: "TestClaim"}

    From the response in the Network Trace View in Dev Tools

    {"claim":"TestClaim"}

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 11, 2020 5:08 PM
  • User711641945 posted

    Hi polachan,

    You need to change like below:

    1.Model:

    public class EmpDocumentModel
    {
        public string Claim { get; set; }
    }

    2.View:

    @model EmpDocumentModel
    <form>
        <input type="text" name="Claim" class="form-control" id="TxtClaim" asp-for="Claim" data-role="text" disabled />
    </form>
    @section Scripts
    {
        <script>
            $(document).ready(function () {
                SetLicense();
            });
          function SetLicense()
          {
                var url = '@Url.Action("GetLicense", "EmpDoc")';
              $.post(url, $('form').serialize(), function (view) {
                  console.log(view);
                        $("#TxtClaim").val(view.claim);// it should be claim instead of Claim
                    });
    
        }
        </script>
    }

    3.Controller:

    public IActionResult GetLicense(EmpDocumentModel data)
    {
        EmpDocumentModel doc = new EmpDocumentModel();
        data.Claim = "TestClaim";  // This value should be updated in my html view
        return Json(data);
    }

    Result:

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2020 1:39 AM

All replies

  • User475983607 posted

    polachan, the input is disabled.

    <input type="text" name="Claim" class="form-control" id="TxtClaim" asp-for="Claim" data-role="text" disabled />

    Wednesday, March 11, 2020 12:19 PM
  • User-474980206 posted

    probably the action is throwing an error. use the browsers network trace to see the response.

    Wednesday, March 11, 2020 2:12 PM
  • User475983607 posted

    I agree, you should use the openly available debug tools to verify the flow you coded matches the actual logic flow.

    Wednesday, March 11, 2020 2:28 PM
  • User-1355965324 posted

    It is not the problem of disbled' The problem is on the line given below.  the value should not be passed   like that  and I dont know the way how can I pass to html

    $("#TxtClaim").val(view.Claim);
    Wednesday, March 11, 2020 3:34 PM
  • User-1355965324 posted

    Please can you advise any free debug tool for asp.net core

    Wednesday, March 11, 2020 3:36 PM
  • User-1355965324 posted

    There is no any error is throwing by action. I checked but there is no error 

    Wednesday, March 11, 2020 3:37 PM
  • User-1355965324 posted

    Bruce

    if I give alert (view.Claim) undefined  message is coming 

    Only I want to pass the value from Json  method doc.claim into html textbox. 

    alert(view.Claim);
    $("#TxtClaim").val(view.Claim);

    Wednesday, March 11, 2020 3:48 PM
  • User-474980206 posted

    as I said, use the browsers network trace to see the response. its probably an error or login page.

    Wednesday, March 11, 2020 4:56 PM
  • User475983607 posted

    polachan

    Please can you advise any free debug tool for asp.net core

    Your original code is incomplete and has syntax errors.  IMHO, your approach to get help is lazy and error prone because the community has to fill in the blanks.  It's best if you provide sample code that illustrates the problem; Code the community can easily copy and paste.  Just about every post, the community recommends opening the browser's dev tools and simply viewing the request/response.  Yet you are still using alert().  This indicates you are ignoring this advise.    Anyway, the issue has to do with case sensitively which is very clear in Dev Tools.  Below is the code I came up by filling in the missing bits from your original snippet.  At some point you'll need to learn how to debug and troubleshoot.

    @model MvcDemo.Models.EmpDocumentModel
    @{
        ViewData["Title"] = "Home Page";
    }
    
        <form>
            <input type="text" name="Claim" class="form-control" id="TxtClaim" asp-for="Claim" data-role="text" disabled />
        </form>
    
    
    @section scripts {
        <script>
    
            $(document).ready(function () {
                SetLicense();
            });
            
            function SetLicense()
            {
                var url = '@Url.Action("Index", "Home")';
                $.post(url, $('form').serialize(), function (view) {
                    console.log(view);
                    $("#TxtClaim").val(view.claim);
                });
            }
    
        </script>
    }
    
        public class EmpDocumentModel
        {
            public string Claim { get; set; }
        }

    From the console in Dev Tools.

    {claim: "TestClaim"}

    From the response in the Network Trace View in Dev Tools

    {"claim":"TestClaim"}

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 11, 2020 5:08 PM
  • User711641945 posted

    Hi polachan,

    You need to change like below:

    1.Model:

    public class EmpDocumentModel
    {
        public string Claim { get; set; }
    }

    2.View:

    @model EmpDocumentModel
    <form>
        <input type="text" name="Claim" class="form-control" id="TxtClaim" asp-for="Claim" data-role="text" disabled />
    </form>
    @section Scripts
    {
        <script>
            $(document).ready(function () {
                SetLicense();
            });
          function SetLicense()
          {
                var url = '@Url.Action("GetLicense", "EmpDoc")';
              $.post(url, $('form').serialize(), function (view) {
                  console.log(view);
                        $("#TxtClaim").val(view.claim);// it should be claim instead of Claim
                    });
    
        }
        </script>
    }

    3.Controller:

    public IActionResult GetLicense(EmpDocumentModel data)
    {
        EmpDocumentModel doc = new EmpDocumentModel();
        data.Claim = "TestClaim";  // This value should be updated in my html view
        return Json(data);
    }

    Result:

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 12, 2020 1:39 AM
  • User-1355965324 posted

    Rena

    Many Many  thanks for thelp. I didnt know we have to use claim rather than Claim.  Still I dodnt get why the view not accepting Claim since the variable defined in model as Claim not claim.  Also what is the tool are you using to debug  asp.net core. ?

    Many Many Thanks again

    Thursday, March 12, 2020 6:11 AM
  • User711641945 posted

    Hi polachan,

    Also what is the tool are you using to debug  asp.net core. ?

    I use the debugger tools provided by Visual Studio.

    Reference:

    Set a breakpoint and start the debugger

    Best Regards,

    Rena

    Thursday, March 12, 2020 8:17 AM
  • User475983607 posted

    I didnt know we have to use claim rather than Claim.  Still I dodnt get why the view not accepting Claim since the variable defined in model as Claim not claim.

    The JSON serializer does sets the object name to camel case.  Well known, openly published, and easy to find with a simple Google search.

     

    Also what is the tool are you using to debug  asp.net core. ?

    The community used the standard tools that come with .NET toolchain.

    The brower's developer tools.

    https://developers.google.com/web/tools/chrome-devtools

    The Visual Studio debugger

    https://docs.microsoft.com/en-us/visualstudio/debugger/debugger-feature-tour?view=vs-2019

    Thursday, March 12, 2020 11:12 AM