Question

All,

I am very new to MVC3 / jQuery combo and have been reading tutorials. While I kind of get the concept, razor syntax etc. I’m still a bit confused on how to implement a basic concept that I’m trying to.

I have a textarea and when someone enters some text into it and hits enter, I want to trigger a ajax call to the server with the content of the text area, and get back a fully formed HTML blurb that I can put in a div. Now as I understand in MVC3 this would be a view, so in a sense I’m rendering a view on the server and sending it back so I can put it in HTML.

Is this possible? Any examples that I can look up to see how this done? I know how to capture keystrokes, get the value etc., it’s this partial rendering of a fully formed HTML via ajax that I’m struggling to understand.

Thanks,

Answer 1

You can do with jQuery. This is how it works. you listen for the keydown event of the text area and when there is a keydown, check what key it is.if it is enter key, then make a jQuery ajax post call to a server page (action method in your controller with the data).Save the data there to your tables and return the markup of what you want and return that. in your script load it to your relevant div.

HTML

//Load jQuery library in your page

<textarea id="txtComment" > </textarea>
<div id="divComment"></div>

Javascript

$(function(){

 $("#txtComment").keydown(function (event) {

     if (event.keyCode == 10 || event.keyCode == 13) {

         var comment=$("#txtComment").val();
         comment=encodeURIComponent(comment);
         $.post("yourcontroller/actionmethod?data="+comment,function(response){
         $("#divComment").html(response);
       });

    }

 });    

});

and your controller action method

public ActionResult actionmethod(string data)
{
  //Do some sanitization on the data before saving.

  // Call your method to save the data to your tables.

   CommentViewModel objCommentVM=new CommentViewModel();
   objCommentVM.Comment=data;

  return View("PartialCommentView",objCommentVM);

}

You should have a ViewMolde class called “CommentViewModel” like this

public class CommentViewModel
{
   public string Comment{ set; get; }
}

and you should have a View called PartialCommentView which is strongly typed to CommentViewModel

@model FlashRack.ViewModel.RackViewModel
@{
    Layout = null;
}
<div>
 @Model.Comment
</div>

If you are simply returning a string, instead of returning a View, you can simply return the string using Return Content("your string here") method as well. But i prefer returning the ViewModel via View because it is more scalable and clean approach to me.

Your action method will return the markup you have in your PartialCommentView with the data.

Keep in mind that you have to take care of the special characters and escaping them properly.