Loading various partial views and passing a parameter to the methods in the controller

Question

I have a page below with buttons and a div pageContent to host my partial views

        div id="ProjID">
            <div id="pjls">
                <label for="SelectProjID">Project:</label>

            </div>
        </div>

        <button class="links" data-url='@Url.Action("link1method","Home")'>Link1</button>
        <button class="links" data-url='@Url.Action("link2method","Home")'>Link2</button>
        <button class="links" data-url='@Url.Action("link3method","Home")'>Link3</button>


        <div id="pageContent"></div>

I have this jquery that is used to load the partial views and their content

        $('.links').on('click', function (e) {
                e.preventDefault();

                var $pageContent = $('#pageContent');
                    url = $(this).data('url');

                    $.get(url, function (data) {
                        $pageContent.replaceWith(data);               
                    });

            })

Below is what my controller methods look like

            public ActionResult link1method(string sample)
            {

                return PartialView("_Partial1");
            }

            public ActionResult link2method(string sample)
            {

                return PartialView("_Partial2");
            }

            public ActionResult link3method(string sample)
            {

                return PartialView("_Partial3");
            }

At the moment when you click the Links button, it is only Link1 that loads the partial view others do not work. when you click on buttons 2 and 3 nothing happens. What am I doing wrong? I will also like to pass a parameter to each controller method.

user3559349 · Accepted Answer · 2016-06-16 02:06:34Z

1

If you click "Link1" first, your replacing <div id="pageContent"></div> with the partial that the method returns so that element no longer exists. If you then click "Link2", var $pageContent = $('#pageContent'); returns undefined so there is nothing to update.

Change the $.get() code to

$.get(url, function (data) {
    $pageContent.html(data); // replaces the inner contents of the element   
})

Side note: Your controller methods have a parameter string sample but you never pass a value for that to the method. You would need to use

$.get(url, { sample: "someValue" }, function (data) {

answered Jun 16, 2016 at 2:06

user3559349

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

3 Comments

Baba Over a year ago

I have a question for you please. If I decide to load the content of the first partial view by default. I know this has to be in the document.ready function. How do I go about writing this?

user3559349 Over a year ago

No, Just use <div id="pageContent">@{ Html.RenderAction("link1method","Home", new { sample = "someValue" }); }</div> to load in initially.

Baba Over a year ago

Thanks. I will try that now.

Russell Jonakin · Accepted Answer · 2016-06-16 02:11:46Z

0

In your get function, you need to pass your parameter data. One way is if you had the data at the end of the url in the query string. Another method is by passing the parameter info in a JSON object like this:

var jsonObject = { sample : 'parameter value to send'  };

$.get(url, jsonObject, function (data) {
    $pageContent.replaceWith(data); 
});

answered Jun 16, 2016 at 2:11

Russell Jonakin

2,06619 silver badges19 bronze badges

Collectives™ on Stack Overflow

Loading various partial views and passing a parameter to the methods in the controller

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related