Using JSON/Javascript to return table values to viewmodel/controller

Question

I'm relatively new to Javascript/JSON and I've been looking really long for an example of how to do this. Currently what I have in my View is

<p>Please enter your email and phone number registered with the account</p>
<table id="Table">
    <tr>
        <td>Email</td>
        <td> <input id = "email" type ="text" name= "email" /></td>
    </tr>
    <tr>
        <td>Phone Number</td>
        <td> <input id = "phone" type ="text" name= "phone" /></td>
    </tr>
</table>
<input type="button" value="Submit" id="sendMSG">

I'd like to send it to the following controler

 public JsonResult SendMessage(SMSTestViewModel model)
    {
   string email = model.email;
   string number = model.phone;
    }

What i'd like to do is to write a script to say that when I click the button, to send the information I put in the two textboxes to my viewmodel and then to my controller. I'd also like to do this while it doesn't referesh the page.

If you can possibly lead me in the right direction, that;d be awesome.

@Ek0nomik Yeah I remade it, the other one wasn't described properly. — user2094139
– user2094139, Commented Jun 7, 2013 at 20:20
Sorry, your questions is not super clear. You would like to insert two input boxes '''html <input id = "phone" type ="text" name= "phone" />''' & '''html <input id = "email" type ="text" name= "email" />''' when you click the submit button? — recneps
– recneps, Commented Jun 7, 2013 at 20:31
@recneps No, when I click the submit button, I would like the send the text within those boxes to my controller/viewmodel. — user2094139
– user2094139, Commented Jun 7, 2013 at 20:36

Community · Accepted Answer · 2017-05-23 12:05:25Z

1

I think I understand what you are looking for. You want to post the form to your SendMessage action result?

This is what you want.

function submit() {
    $.ajax({
        type: "POST",
        url: /SendMessage,
        contentType: "application/json",
        dataType: "json",
        data: { "email" : $("#email").value, "phone" : $("#phone").value }, 
        success: function (data) {
            console.log(data);
        },
        error: console.log("Where's the nearest bar?");
    });
}

$("#sendMSG").click(function () {
    submit();
});

Sorry, I assumed you were using JQuery.

If you do not want to use JQuery just change the.

$("#phone")

to

document.getElementById("phone")

And here is how to to a POST without JQuery.

How to make an AJAX call without jQuery?

Hope this helps.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Jun 7, 2013 at 20:37

recneps

1,2955 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2094139 Over a year ago

Hey, thanks for your answer @recnaps just a quick question. How do i connect it so that it runs when I click the button "sendMSG"

recneps Over a year ago

<input type="button" onclick="submit()" value="Submit" id="sendMSG"> will do it, but if you want to add a click handler then this will do it as well. $("#sendMSG").click(function () { submit(); }); Just a note, that if this inside a form you are going to want to disable the default action.

user2094139 Over a year ago

Hey @recneps the url you specified doesn't work as mentioned :( are there any ideas why?

recneps Over a year ago

So there are going to be a lot of nuances you may need to iron out. Those are going to include the routing in the asax file in your MVC application, allowing whatever http methods you want on your Method POST I assume, your also not returning anything from your SendMessage method? Also if the domain is different for some reason you are going to run into CORS issues. My advice is to read some more up on POSTing to an ActionResult, download REST client and make sure the POST works through the REST client locally and then move it into the JavaScript.

recneps Over a year ago

You probably just need to change this. public JsonResult SendMessage(SMSTestViewModel model) to [AllowAnonymous] [HttpPost] public JsonResult SendMessage(SMSTestViewModel model) {

Collectives™ on Stack Overflow

Using JSON/Javascript to return table values to viewmodel/controller

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related