使用Jquery Ajax调用MVC4局部视图

时间：2013-10-18 08:39:43

标签： ajax asp.net-mvc jquery asp.net-mvc-4

我需要你帮助我的mvc4项目。我有2个下拉菜单。当我选择第一个时，第二个会自动填充Jquery和Ajax的帮助。当我选择另一个，现在填充了一些数据时，我需要调用一个调用PL / SQL过程的方法，我需要将值传递给该方法，该方法在第二个下拉菜单中选择。 该方法重新调整了一些我需要传递给局部视图的数据，在该局部视图中，我需要从传递的数据生成树视图。 到目前为止，我能够在部分视图中生成TreeView（使用jsTree），当我硬编码一个值并从controler调用我的方法时，但是当我从第二个下拉列表中选择一个值时，我需要这样做。

这是我的代码：

我的控制器

    public class IndexController : Controller
{

    public ActionResult Index()
    {
        EpfeSelectScreen model = new EpfeSelectScreen();

        #region Country

        var b = (from a in dbEntitiesErste.CONFIG_COUNTRIES
                 orderby a.COUNTRY_ID
                 select new Countries
                 {
                     Text = a.COUNTRY_NAME,
                     Value = a.COUNTRY_ID
                 });

        model.Country = b.OrderBy(x => x.Text).ToList();
        #endregion

        #region Oracle Stored Procedures

        List<TreeNode> list = new List<TreeNode>();
        list = ClassData.GetAllClasses(1); //hardcoded value 1 Here goes the value from second drop down list
        var TopHierarchy = list.Where(x => x.ParentId == -1).FirstOrDefault();
        SetChildren(TopHierarchy, list);

        #endregion

        var pmViewModel = new MainViewModel
        {
            FullModelObject = model,
            PartialModelObject = TopHierarchy
        };

        return View(pmViewModel);


    }

    #region generate Tree
    private void SetChildren(TreeNode model, List<TreeNode> list)
    {
        var childs = list.Where(x => x.ParentId == model.ChildId).ToList();
        if (childs.Count > 0)
        {
            foreach (var child in childs)
            {
                SetChildren(child, list);
                model.Children.Add(child);

            }
        }

    }
    #endregion


    #region jquery methods

    [OutputCache(Duration = 0)]
    [HttpGet]
    public JsonResult Application(string[] Country)
    {
        var apl = new List<Applications>();
        if (Country[0] == "")
        {
            //*aplications
            var result = (from a in dbEntitiesErste.CONFIG_APPLICATIONS
                             select new Applications
                             {
                                 Text = a.APPLICATION_NAME,
                                 Value = a.APPLICATION_ID
                             });//*.OrderBy(x => x.Text).ToList()

            apl.Add(new Applications { Value = 0, Text = "--Please choose application--" });
            apl.AddRange(result.OrderBy(x => x.Text).ToList());
        }
        else
        {
            var result = (from a in dbEntitiesErste.CONFIG_APPLICATIONS
                             where Country.Contains(a.COUNTRY_ID)
                             select new Applications
                             {
                                 Text = a.APPLICATION_NAME,
                                 Value = a.APPLICATION_ID
                             }); //*.OrderBy(x => x.Text).ToList();
            apl.Add(new Applications { Value = 0, Text = "--Please choose application--" });
            apl.AddRange(result.OrderBy(x => x.Text).ToList());
        }

        var retVal = new { Application = aplikacije };
        return Json(retVal, JsonRequestBehavior.AllowGet);
    }

    //[OutputCache(Duration = 0)]
    //[HttpGet]
    //public JsonResult Tree(int idApp)
    //{
    //    var ret = (from a in dbEntitiesErste.CONFIG_APPLICATIONS
    //               select new Applications
    //               {
    //                   Text = a.APPLICATION_NAME,
    //                   Value = a.APPLICATION_ID
    //               }).OrderBy(x => x.Text).ToList();

    //    return Json(ret, JsonRequestBehavior.AllowGet);
    //}


    #endregion
}

这是我的主视图（Index.cshtml）

@model EPFE.Models.ViewModels.MainViewModel


<!DOCTYPE html>
@{
     ViewBag.Title = "EB";    
 }
<head>
<title>EBB</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.js")" type="text/javascript"></script>
<script src="~/Scripts/Selections.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="@Url.Content("~/Scripts/jstree.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/Selection.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/themes/style.css")" rel="stylesheet" />
<script type="text/javascript">
    var pathAplications = '@Url.Action("Application", "Index")';
    var pathTreeView = '@Url.Action("Tree", "Index")';
</script>

</head>

<body>
     <table>
       <tr>
         <td>
           @Html.DropDownList("Country", new SelectList(Model.FullModelObject.Country, "Value", "Text"), "--Please select Country--")
         </td>
       </tr>
       <tr>
        <td>
          @Html.DropDownList("Application", new SelectList(Model.FullModelObject.Application, "Value", "Text"), "--Please choose application--")
         </td>
       </tr>
     </table>
     <fieldset class="Tree">
       <div id="divtree">
          <ul id="tree">
            <li>
               <a href="#" class="usr">@Model.PartialModelObject.ObjectIdentifier</a>
                    @Html.Partial("_TreeView", Model.PartialModelObject)
            </li>
          </ul>
       </div>
     </fieldset>
  </body>

这是我的部分视图（_TreeView.cshtml）

@model EPFE.TreeViewModel.TreeNode


@foreach (var item in Model.Children)
{
<ul>
    @if (item != null)
    {
        <li>
            <a href="#" class="usr">@item.ObjectIdentifier</a>
            @if (item.Children.Count > 0)
            {
                @Html.Partial("_TreeView", item)
            }

        </li>
    }

</ul>
}

这些是我的模特

    public class EpfeSelectScreen
{
    public string Search { get; set; }
    public string selectedApplication { get; set; }
    public string selectedCountry { get; set; }
    public string selectedMetaData { get; set; }
    public string selectedTreeView { get; set; }
    public List<Countries> Country { get; set; }
    public List<Applications> Application { get; set; }
    public List<SelectListItem> MetaData { get; set; }
    public List<SelectListItem> References { get; set; }
    public List<SelectListItem> ReferencedBy { get; set; }
    public List<SelectListItem> TreeView { get; set; }

    public EpfeSelectScreen()
    {
        Country = new List<Countries>();
        Application = new List<Applications>();
        References = new List<SelectListItem>();
        ReferencedBy = new List<SelectListItem>();
        TreeView = new List<SelectListItem>();
        MetaData = new List<SelectListItem>();
    }
}

第二个

public class MainViewModel
{
    public EpfeSelectScreen FullModelObject { get; set; }
    public TreeNode PartialModelObject { get; set; }

    public MainViewModel()
    {
        FullModelObject = new EpfeSelectScreen();
        PartialModelObject = new TreeNode();
    }
}

和最后一个

public class TreeNode
{
    public int ParentId { get; set; }
    public int ChildId { get; set; }
    public int ObjectRelId { get; set; }
    public string ObjectIdentifier { get; set; }
    public string ObjectTypeId { get; set; }
    public IList<TreeNode> Children { get; set; }

    public TreeNode()
    {
        Children = new List<TreeNode>();
    }

}

这些是我的脚本

$(document).ready(function () {
$("#Country").on('change', CountryChange);
//$("#selectedApplication").on('change', ApplicationChange);
//*
$("#Application").on('change', ApplicationChange);
});


function CountryChange() {

var CountryIds = [];
$("#Country option:selected").each(function (i, selected) {
    CountryIds[i] = $(selected).val();
});

$.ajax({
    url: pathAplications,
    type: 'GET',
    data: { Country: CountryIds },
    success: function (data) {
        var apl = $("#Application");

        apl.empty();

        for (var j = 0; j < data.Application.length; j++) {
            var item = data.Application[j];
            var option = "<option value='" + item.Value + "'>" + item.Text + "</option>";
            apl.append(option);
        }

    },
    error: function (x, y) {
        $("#displayError").html(x.val());

    },
    traditional: true
});
}


function ApplicationChange() {

var applicationId = [];
$("#Application option:selected").each(function (i, selected) {
    applicationId[i] = $(selected).val();
});

$.ajax({
    url: pathTreeView,
    type: 'GET',
    data: { Application: applicationId },
    success: function (data) {
        var tree = $("#selectedApplication");

        trees.empty();

        for (var j = 0; j < data.Application.length; j++) {
            var item = data.Application[j];
            var option = "<option value='" + item.Value + "'>" + item.Text + "</option>";
            trees.append(option);
        }

    },
    error: function (x, y) {
        $("#displayError").html(x.val());

    },
    traditional: true
});
}

函数ApplicationChange捕获正确的值，但我不知道如何使用它来调用pl / sql过程的方法并将该数据返回到局部视图。

1 个答案:

答案 0 :(得分：1)

像这样给你的网址

'@Url.Action("actionname","controllerNmae")',

还要确保您是在进行get或post请求，然后目标操作也应具有该属性。

你的数据类型也是json。

甚至更好地使用这样

 $.getJSON('@Url.Action("Controller Name here")',
 function ()
 {          
 });
相关问题
最新问题