Show partial view on button click mvc

Question

I'm trying to figure out mvc, so I have problem... I have this model:

public class Company
    {
        public string ID { get; set; }
        public string Symbol { get; set; }
        public string Description { get; set; }
}

and controller:

public ActionResult EditCompany()
        {
            ViewBag.Message = "Edit Company Page";
            return View();
        }

        public ActionResult PartialEditCompany()
        {
            DataSet dataSet = client.SelectCompanies();
            ObservableCollection<Company> inventoryList = new ObservableCollection<Company>();
            foreach (DataRow dataRow in dataSet.Tables[0].Rows)
            {
                inventoryList.Add(new Company
                {
                    ID = (String)dataRow["ID"],
                    Symbol = (String)dataRow["Symbol"],
                    Description = (String)dataRow["Description"]
                });
            }
            return PartialView(inventoryList);
        }

and view EditCompany:

@model Test.Models.Company

@{
    ViewBag.Title = "EditCompany";
    }

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/mycss.css" rel="stylesheet" />

<script>

    $('#loadData').click(function () {
        $('#partial').load('/HomeController/PartialEditCompany/');
    });

</script>

<div id="stylized2" class="myform">
    @using (Html.BeginForm("SaveCompany", "Home", FormMethod.Post, new { @class = "insertcompanyform" }))
    {
        @Html.ValidationSummary(true)
        <table>
            <tr>
            <td class="first">@Html.Label("ID:")
            </td>
            <td class="second">@Html.TextBoxFor(m => m.ID)</td>
        </tr>
            <tr>
            <td class="first">
                @Html.Label("Symbol:")
            </td>
            <td class="second">@Html.TextBoxFor(m => m.Symbol)</td>
        </tr>
        <tr>
            <td class="first">
                @Html.Label("Description:")
            </td>
            <td class="second">@Html.TextBoxFor(m => m.Description)</td>
        </tr>
<tr>
                    <td class="third"><input type="button" value="Traži" id="loadData" /></td>
                    </tr>
    <tr>
                    <td>
                        <div id="partial"></div>
                    </td>
                </tr>

and finnaly partialview PartialEditCompany:

@using System.Web.Helpers

@{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
    selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
    grid.Pager(WebGridPagerModes.NextPrevious);
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/Content/mycss.css" rel="stylesheet" />

@Html.WebGrid()

What I want to do is on button click (with id=loadData) to call partial view that will put grid into div tag (with id=parital). Please help! What am I doing wrong?

Jorge F · Accepted Answer · 2017-10-11 13:38:29Z

Well as I can't comment here are some points I use to call partial views

If you are using a "main view" or a "shared view", you only need to define the scripts on the main view, not in your partial.
If you want a partial view to be loaded on click without any parameter you can call it and "hide it"

View

<div id="partial" style="display: none">
    @{Html.RenderAction("PartialEditCompany"); }
</div>

Controller

[ChildActionOnly]
    public ActionResult PartialEditCompany()
    {
        //stuff you need and then return the partial view 
        //I recommend using "" quotes for a partial view
        return PartialView("inventoryList");
    }

And then if you want to have your partial view show on click you only display the div containing the div.

But if you want to use your partial view with parameters you can do the following

Javascript

 function getview(parameter){
         var url = "@Html.Raw(Url.Action("PartialEditCompany", "Controller", new { parameterID = "-parameter" }))";
         url = url.replace("-parameter", parameter);
         $('#partial').load(url);



        /*Better code by October 11, 2017, you can use this instead of the 3 lines on top*/
        /*
         var url = "@Html.Raw(Url.Action("PartialEditCompany", "Controller", new { parameterID = "-parameter" }))";
         url = url.replace("-parameter", parameter);
         $.ajax({
             url: url, 
             type: "GET", 
             cache: false, 
             success: function(result){
                  $("#partial").html(result)
             },
             error: function(){
                 //handle your error here
             }
         });
        */
 }

With javascript you can call a partial view and pass the parameter to the controller. Of course you don't specify if you need parameters or not, but here are both solutions I use with partial views. And you call your javascript function onclick event if you want or as you may like. (or using data-attr on the tag, and the with javascript or jquery on the click event, get that data-attr value without creating, this could be the unobtrusive way)

<input type="button" value="Traži" id="loadData" onclick='getview(parameter)' />

Hope this help a little about partial views.

Collectives™ on Stack Overflow

Show partial view on button click mvc

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related