mvc3 dropdownlist to render partial view and persi

2019-07-28 23:19发布

问题:

I am trying to have a page that renders an mvc dropdownlist and renders a partial view whenever the value in the dropdownlist changes. It is working alright until I click the button in the partial view to persist changes made in the partial view.

I have the following code for my partial view -

<script type="text/javascript">
    $(function () {
        $("#sortable, #sortable2").sortable({
            connectWith:  ".connectedSortable"
        }).disableSelection();        
    });

    $(function () {
        $("button").button();
        $(".submit").click(function () {
            var list = "somedata";
            var companyid = $("#myid").text();            
            $.ajax({
                url: "/Controller/Action",
                data: {
                    'values': list,
                    'id': myid
                }
            });
        });
    });

</script>

......

<div class="submit">
    <button>Submit</button>
</div>

Here is the code for my main view -

<script type="text/javascript">
    function processList() {
        var myid = $("#ddList").val();
        $.ajax({
            url: 'Controller/Action/',
            data: {
                'id': myid 
            },
            datatype: 'html',
            success: function (result) { success(result); }            
        });
    }

    function success(result) {
        $("#partial").html(result);
    }
</script>

@using (Html.BeginForm("Action", "Controller"))
{      
    @Html.DropDownListFor(x => x.SelectedValue, Model.MyEntity, new { @id = "ddList", onchange = "processList();" })


<div id="partial" style="height:  90%">

        @Html.Partial("_MyPartialView")

</div>
}

The code from my controller is below -

public ActionResult Action(int? id)
        {                        
            id = id ?? 1;    

            var vm = new MyViewModel
            {
                .....
            };
            return PartialView("_MyPartialView", vm);
        }

        public ActionResult PersistActivities(int myid, string values)
        {
            int result = _service.UpdateActivityOrderByCompany(companyid, values);                         
            return new EmptyResult();            
        }

I want the page to re-render just the partial view when I click the persist button. Even if it just didn't do anything, that would be fine. What is actually happening is that the controller is entering the "Action" action again and then throws a rendering error. If I continue through the jquery error, just the partial view data renders in the whole window.

Can anyone point out where my issues are with rendering/controller calls?

I hope that is enough info. I had to trim down the code, but can provide more if necessary.

Thanks for any thoughts.

EDTI -

the error I'm getting is in the partial view on the first function for rendering the sortable lists -

Microsoft JScript runtime error: Object expected

Hope that helps

回答1:

There are a number of things that could be the cause of what's happening.

Your urls are probably not correct.

url: 'Controller/Action/',

should be:

url: '@Url.Action("Action", "Controller")', 

Your button submit code is referring to your Action in your Controller, but you probably want it to go to your PersistActivities. Also, your controller action is expecting variables myid and values, but you're sending id and values instead. You're also referring to an html element myid, but it's not shown here, I assume you left it out for brevity. There also is not a success function - what are you intending for that button to actually do?

What you probably want is something like this:

 $(".submit").click(function () {
     var list = "somedata";
     var myid = 1;
     alert(myid);
     $.ajax({
        url: '@Url.Action("PersistActivities", "Home")',
        data: {
           'values': list,
           'myid': myid
        }            
     });
  });

Finally, the reason your button is posting the page is that it's submitting the form. You should change the type of your button to be type button, if you don't want it to actually submit the form.

<button type="button">Submit</button>