Home ASP.Net MVC Usage confusion
Reply: 1

ASP.Net MVC Usage confusion

Kieran Melia
1#
Kieran Melia Published in 2017-11-14 11:57:01Z

I'm in a situation where I would like to take a value from a page using JQuery, update the model with that value, call a method to update a different value in a model. Then call the controller to return a view with the new model.

I'm new to this so I imagine this is the wrong approach.

This is the View I have so far:

@using Cubic.OSS.SNMPMessageDuggerWebApplication.Models
@model SnmpModel
@{
   ViewBag.Title = "SNMP Message Debugger";
}

@section scripts
{

<script src="~/Scripts/jquery-1.7.1.js"></script>

<script type="text/javascript">

    $(document).ready(function() {


        $("#input-button").click(function () {
            // This is where I want the process to start.
        });


    });

</script>

}


<h2>@ViewBag.Title.</h2>
<div class="container-bar">
    <div id="input-bar">
        <p class="input-label">Enter SNMP Message: </p>
        <textarea rows="10" cols="300" id="input-area"></textarea>
        <br />
        <button id="input-button">Convert</button>
    </div>
    <div id="output-bar">
        <p class="output-label">Result: </p>
        <textarea rows="10" cols="300" id="output-area"></textarea>
    </div>
</div>

My model looks like this:

public class SnmpModel
{

    public string SnmpMessageInput { get; set; }
    public string SnmpMessageOutout { get; set; }


   // I Imagine a method would be added here to transform the input

}

And this is the controller so far:

public class SNMPController : Controller
{
    // GET: SNMP
    public ActionResult Index()
    {
        return View();
    }


}

What I don't know how to do is: update the model with the returned JQuery, then refresh the page with the new model using the controller.

The input would be taken from the input text area, then transformed using code that was written in C# previously. This would be a method in the model I image. I have to use the code written in C# so I can't do the algorithm in js.

Thanks.

Sajjad Ali
2#
Sajjad Ali Reply to 2017-11-14 12:16:22Z

Dont do the page/view reload. Just update the desired value like this:

 function onChangeNumber() {
    var changedText = $("#PhoneNo").val();
    var CountryVal = $("#CountryCode").val();
    var CountryName = $("#appSelected option:selected").text();
    var ProductVal = $('#appSelected option:selected').val();
    url = '/controller/PhoneTextChanged';
    var data_to_send = {
        changed: changedText, ProductValue: CountryName
    };
    alert(changedText + CountryName);
    $.ajax({
        url: url,
        type: "POST",
        async: true,
        dataType: "json",
        data: data_to_send,
        success: function (data, textStatus, jqXHR) {
            if (data == "Invalid Number format") {
                alert("Invalid Number format");
            }

            else if (data == "hide") {
                $("#hiddenDiv").hide();
            }
            else {
                $("#hiddenDiv").show();
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("Server error! try back later.");

        }
    });
};

In this code what im doing is, I am hiding or unhiding a depending upon the result returned by the method i created in my controller i.e PhoneTextChanged.

I pass parameters to this method PhoneTextChanged and then i evaluate my results and then return the result from controller like this :

 return Json("no hide");

I hope you want to do the same stuff at your end. Let me know if you want to know more.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.316718 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO