Partial view render on button click

Question

I have Index view:

@using System.Web.Mvc.Html
@model  MsmqTestApp.Models.MsmqData



    

        

Answer 1

The first thing to do is to reference jQuery. Right now you have referenced only jquery.unobtrusive-ajax.min.js but this script has dependency on jQuery, so don't forget to include as well before it:

<script src="@Url.Content("~/Scripts/jquery.jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

Now to your question: you should use submit buttons with an HTML form. In your example you don't have a form so it would be semantically more correct to use a normal button:

<input type="button" value="Buy" data-url="@Url.Action("BuyItem", "MsmqTest", new { area = "Msmq" })" />
<input type="button" value="Sell" data-url="@Url.Action("SellItem", "MsmqTest", new { area = "Msmq" })" />

and then in a separate javascript file AJAXify those buttons by subscribing to the .click() event:

$(function() {
    $(':button').click(function() {
        $.ajax({
            url: $(this).data('url'),
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#msmqpartial').html(result);
            }
        });
        return false;
    });
});

or if you want to rely on the Microsoft unobtrusive framework you could use AJAX actionlinks:

@Ajax.ActionLink("Buy", "BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })
@Ajax.ActionLink("Sell", "SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" })

and if you want buttons instead of anchors you could use AJAX forms:

@using (Ajax.BeginForm("BuyItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
    <button type="submit">Buy</button>
}
@using (Ajax.BeginForm("SellItem", "MsmqTest", new { area = "Msmq" }, new AjaxOptions { UpdateTargetId = "msmqpartial" }))
{
    <button type="submit">Sell</button>
}

From what I can see you have already included the jquery.unobtrusive-ajax.min.js script to your page and this should work.

Answer 2

Maybe not the solution you were looking for but, I would forget about partials and use Javascript to call the server to get the data required and then return the data to the client as JSON and use it to render the results to the page asynchronously.

The JavaScript function;

var MyName = (function () {


//PRIVATE FUNCTIONS
var renderHtml = function(data){
   $.map(data, function (item) {
       $("<td>" + item.whateveritisyoureturn + "</td>").appendTo("#msmqpartial");
   });
};

//PUBLIC FUNCTIONS
var getData = function(val){
   // call the server method to get some results.
    $.ajax({ type: "POST",
        url: "/mycontroller/myjsonaction",
        dataType: "json",
        data: { prop: val },
        success: function (data) {
            renderHtml();
        },
        error: function () {
        },
        complete: function () {
        }
    });
};

//EXPOSED PROPERTIES AND FUNCTIONS
return {
    GetData : getData
};


})();

And on the Server....

public JsonResult myjsonaction(string prop)
        {
            var JsonResult;

            // do whatever you need to do

            return Json(JsonResult);
        }

hope this helps....