多个局部视图渲染

本文关键字:视图 个局 | 更新日期: 2023-09-27 18:24:28

我有三个下拉列表-Project、Sprint和Story。Sprint下拉列表将基于选定的Project进行绑定,Story下拉列表将根据选定的Sprint进行绑定。在所选故事的基础上,我想展示一个网络网格。

我正在做的是:我的Project下拉列表在主视图页面上,Sprint下拉列表和Story下拉列表是两个不同的局部视图。当我从Project中选择时,所选的值将在jquery中获取,并作为传递给控制器

$('#Project').change(function (e) {
    e.preventDefault();
    var selectedVal = $("#Project").val();
    $.ajax({
        url: "/Task/BindSprintList",
        data: { projectTitle: selectedVal },
        type: 'Get',
        success: function (result) { 
                $('#ViewGrid').html(result);
        },
        error: function () {
            alert("something seems wrong");
        }
    });
});

现在Sprint下拉列表出现了。当我从Sprint中进行选择时,所选的值将在jquery中获取,并作为传递给控制器

$('#Sprint').change(function (e) {
    e.preventDefault();
    var selectedProjectVal = $("#Project").val();
    var selectedSprintVal = $("#Sprint").val();
    $.ajax({
        url: "/Task/BindStoryList",            
        data: { projectTitle: selectedProjectVal, sprintTitle: selectedSprintVal },
        type: 'Get',
        success: function (result) { 
            $('#ddlStory').html(result);            },
        error: function (err) {
            alert("something seems wrong "+ err);
        }
    });
});

但现在故事下载列表没有显示。

MainPage.cshtml

<table>
    @{
        if (ViewBag.ProjectList != null)
        {
            <tr>
                <td>
                    <h4>SELECT PROJECT&nbsp; &nbsp; &nbsp; &nbsp;</h4>
                </td>
                <td>
                    @Html.DropDownList("Project", new SelectList(ViewBag.ProjectList, "Value", "Text"), " -- Select -- ")
                </td>
            </tr>
        }
        if (ViewBag.SprintList != null)
        {
            Html.RenderPartial("PartialSprintDropDown", Model.AsEnumerable());
        }
        if (ViewBag.StoryList != null)
        {
            Html.RenderPartial("PartialStoryDropDown", Model.AsEnumerable());
        }
    }
</table>

PartialSprintDropDown.cshtml

<table>
    <tr>
        <td>
            <h4>SELECT SPRINT</h4>
       </td>
       <td>
           &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@Html.DropDownList("Sprint", new SelectList(ViewBag.SprintList, "Value", "Text"), " -- Select -- ")
       </td>
    </tr>      
</table>
<script src="~/Script/Task/IndexTask.js" type="text/javascript"></script>

PartialStoryDropDown.cshtml

<div id="ddlStory">
    <table>
        <tr>
            <td>
                <h4>SELECT STORY</h4>
           </td>
           <td>
               &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;@Html.DropDownList("Story", new SelectList(ViewBag.StoryList, "Value", "Text"), " -- Select -- ")
           </td>
        </tr>      
    </table>
</div>
<script src="~/Script/Task/IndexTask.js" type="text/javascript"></script>

有人能告诉我为什么故事下拉列表没有显示吗。即使在我对PartialStoryDropDown.chtml进行解包时,"ViewBag.StoryList"也会按预期包含数据,但不会显示在页面上。

我正在Viewbag.PrintList和Viewbag.StoryList中包含我的数据。正在显示SprintDropdownlist。

如何解决此问题?

BindSprintList()

public ActionResult BindSprintList(string projectTitle)
        {
            try
            {
                string Owner = Session["UserName"].ToString();
                int? ProjectId = GetProjectID(projectTitle);
                var ddlSprint = new List<string>();
                List<SelectListItem> items = new List<SelectListItem>();
                var querySprint = (from sp in entities.Sprints
                                    where sp.Project_ID == ProjectId && sp.Sprint_Status != "Completed"
                                    select sp).ToList();
                foreach (var item in querySprint.ToList())
                {
                    SelectListItem li = new SelectListItem
                    {
                        Value = item.Sprint_Title,
                        Text = item.Sprint_Title
                    };
                    items.Add(li);
                }
                IEnumerable<SelectListItem> List = items;
                ViewBag.SprintList = new SelectList(List, "Value", "Text");
            }
            catch (Exception e)
            {
                var sw = new System.IO.StreamWriter(filename, true);
                sw.WriteLine("Date    ::    " + DateTime.Now.ToString());
                sw.WriteLine("Location ::  AgileMVC >> Controllers >> TaskController.cs >> public ActionResult BindSprintList(string projectTitle)");
                sw.WriteLine("Message ::    " + e.Message);
                sw.WriteLine(Environment.NewLine);
                sw.Close();
            }
            return PartialView("PartialSprintDropDown", ViewBag.SprintList);
        }

BindStoryList()

public ActionResult BindStoryList(string projectTitle, string sprintTitle)
    {
        try
        {
            string Owner = Session["UserName"].ToString();
            int? ProjectId = GetProjectID(projectTitle);
            int? SprintId = GetSprintID(ProjectId, sprintTitle);
            var ddlStory = new List<string>();
            List<SelectListItem> items = new List<SelectListItem>();
            var queryStory = (from st in entities.Stories
                                join spss in entities.SprintStories on st.Story_ID equals spss.Story_ID
                                where spss.Sprint_ID == SprintId && spss.Project_ID == ProjectId
                                select st).ToList();
            foreach (var item in queryStory.ToList())
            {
                SelectListItem li = new SelectListItem
                {
                    Value = item.Story_Title,
                    Text = item.Story_Title
                };
                items.Add(li);
            }
            IEnumerable<SelectListItem> List = items;
            ViewBag.StoryList = new SelectList(List, "Value", "Text");
        }
        catch (Exception e)
        {
            var sw = new System.IO.StreamWriter(filename, true);
            sw.WriteLine("Date    ::    " + DateTime.Now.ToString());
            sw.WriteLine("Location ::  AgileMVC >> Controllers >> TaskController.cs >> public ActionResult BindStoryList()");
            sw.WriteLine("Message ::    " + e.Message);
            sw.WriteLine(Environment.NewLine);
            sw.Close();
        }
        return PartialView("PartialStoryDropDown", ViewBag.StoryList);
    }

多个局部视图渲染

我想我看到了您的问题——ddlStorydiv是结果的一部分。所以当你说$('#ddlStory')时,它什么也没做,因为它还没有出现在页面上。

我认为在您的主页中,您需要有一个ddlStory的占位符,并替换该占位符的html。类似于$('#ddlStoryWrapper').html(result),其中ddlStoryWrapper只是页面上的一个空div。