How to render view in same page onclick of link in mvc

Question

i have two views:

1. Index
2. Create

Contents of each view:

1. Index

   • 'Create' link
   • display records from table in database.

2. Create

   • Create new record and save it and back to index view.

I want to display the Create view in the Index view when users click on 'Create' Link. What is the best way to do it?

Solution 1

You may use jQuery load() function. You need to change your Create View to PartalView.

Then on your Index View you need something like that:

<a href="#" class="Create">Create</a>

<div class="divForCreate"></div>

<script>
$('.Create').click(function() {
  $('.divForCreate').Load('@Url.Action("Create", "Home", new {id = Model.id})')
});
</script>

Solution 2

Your demand can also be realized using $.ajax(), which is a little bit complex than simply using load(), but can easily applied when your data come from a different domain. For example,

<input type="submit" value="create" onclick="create();"/>
<div id="bottom_row"></div>
<script>
function create(){
    //you can get your paramters like this.
    var link_head = $("#link_head").val();
    $.ajax({
        type : "get",
        async:false,
        url : "http://yourIP:port/path to method.action?paramters,
        dataType : "jsonp",
            jsonp: "callbackparam",
            jsonpCallback:"success_jsonpCallback",
            success : function(json){
                 if(json.Status){
                 location.reload();
                 //your further action here
                 }else{
                     alert("Error");
                 }
            },
            error:function(){
                 alert('fail');
            }
     });
}
</script>

Comments

[Nimesh Vaghasiya]

view is rendered but when 'Create' Button is clicked the view return this localhost:3334/Contacts/Create instead of this i want to return localhost:3334/# page with validation messages what to do?

[Andrey Gubal]

@NimeshVaghasiya I can't answer, because I didn't see your full code. I may just suggest that your PartialView for some reason can't see your jquery valodation js. Try to add link to library directly to PartialView to experiment with it.

[AlexB]

Small typo mistake, but Load() doesn't exist, it's load(). I just used you answer to solve my current problem and found this error. I can't correct it because it's only one character, so I hop the author will se this comment. Thanks for sharing Andrey, I upvoted !