How to Processing textual inputs in the client side

Total Post:183

Points:1285
 1294  View(s)
Ratings:
Rate this:

Using ASP.NET MVC 5 and Razor view engine, is there a way to get the values of input fields before posting the data to the server, processing them and then sending the processed data instead?

For example:

@using (@Html.BeginForm("ViewPage", "Home",FormMethod.Post)) {
     @Html.TextBox("Field1")
     @Html.Hidden("Field2");
     <input type="submit"id="HiddenButton" value="Submit" style="display:none" />
     <input type="button"id="VisibleButton" value="Submit" />   
}

and now :

<script type="text/javascript">
     document.ready(function() {
        $("#VisibleButton").click(function() {
             var Temp =$("#Field1").val()
             @{
                 // C# Area Processing the Temp, by for example calling an extension method and
                 assigning the new value to the Hidden Field
              }
              $("#HiddenButton").trigger("click")
        })
     })
</script>

I'd like to do this , because I wanna encrypt a text before sending it to the server and I've already made my encryption method in C#.

  1. Post:102

    Points:714
    Re: How to Processing textual inputs in the client side

    This is possible but the processing should happen on the client using javascript:



    $("#VisibleButton").click(function() {
        var Temp = $("#Field1").val();
     
        // process Temp here using javascript
        Temp = 'some new value';
     
        // set the processed value back to the input field
        $("#Field1").val(Temp);
     
        $("form").submit();
    });



    If you want the processing to happen on the server for some reasons, you could send it as an AJAX request to a controller action:



    $("#VisibleButton").click(function() {
        var temp = $("#Field1").val();
     
        $.ajax({
            url:'@Url.Action("SomeAction")',
            data: { value: temp},
            success:function(result) {
                $("#Field1").val(result);
                $("form").submit();
            }
        });
    });



    And your controller action:



    public ActionResult SomeAction(string value)
    {
        // do your processing here
        value = "some new value";
     
        return Json(value);
    }

     

      Modified On Apr-07-2018 06:53:01 AM

Answer