在装载点击同一页面上的href链接局部视图 [英] Load partial View on clicking href link on the same page

问题描述

所以我必须返回一个强类型的局部视图与产品列表动作

 公众的ActionResult的GetProducts（INT CATID，诠释LANGID）
        {
            CategoryViewModel OB =新CategoryViewModel（）;
            ob.GetProducts（CATID，LANGID）;
            返回PartialView（的GetProducts，OB）;        }
 

在我的指数（）查看有关文件准备好我加载它返回我一个divcategoriesPlaceGetCategories行动的局部视图。

这里是我的指数（）查看的

 ＆LT;脚本＆GT;
    $（文件）。就绪（函数（）{        $（＃categoriesPlace）的负载（'？LANGID ='。'@ Url.Action（GetCategories）'+ + $（＃ddlLanguages​​）VAL（））;
    }）;
＆LT; D​​IV ID =categoriesPlace＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID =productsPlace＆GT;＆LT; / DIV＆GT;
 

---

在GetCategories（）查看我有很多的链接。 所以我想，当我点击一些这个链接 - 加载DIV productsPlace（这是在指数（）视图）与从的GetProducts（）动作

返回的局部视图

这里是我的GetCategories（）查看的

  @model IEnumerable的＆LT; OnlineStore.Commercial.Models.CategoryViewModel＆GT;@ {
    ViewBag.Title =指数;
}
    @foreach（在@Model VAR树）
    {
    ＆LT; UL ID =树＆GT;
        ＆LT;立GT;
            ＆LT; A HREF =@ Url.Action（的GetProducts，新的{CATID = tree.Category code，LANGID = 1}）＆GT; @ tree.CategoryName＆LT; / A＆GT;        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    }
 

解决方案

我会给所有的＆LT; A＆GT; 元素中的一类，说的getProducts ，然后绑定一个click事件对他们说：
（请原谅我以书面形式URL中的＆LT;％语法）

因此​​，对于＆LT; A＆GT; 元素：

 ＆LT; A HREF =JavaScript的：无效（0）;类=的getProducts＆GT; @ tree.CategoryName＆下; / A＆GT;
 

和click事件绑定：

  $（'的getProducts'）。在（'点击'，功能（）{
     $（'＃productsPlace'）负载（'＆LT;％= Url.Action（的GetProducts，YourController）％＆GT;'，新的{CATID = tree.Category code，LANGID = 1}，空）;
}）;
 

SO I have action which returns a strongly typed partial view with list with products

public ActionResult GetProducts(int catID,int langID)
        {
            CategoryViewModel ob = new CategoryViewModel();
            ob.GetProducts(catID, langID);
            return PartialView("GetProducts",ob);

        }

In my Index() view on document ready I load the partial view which returns me GetCategories action in a div "categoriesPlace".

Here is my Index() View

<script>


    $(document).ready(function () {

        $("#categoriesPlace").load('@Url.Action("GetCategories")' + '?langId=' + $("#ddlLanguages").val());


    });
<div id="categoriesPlace"></div>
<div id="productsPlace"></div>

---

In GetCategories() view I have a lot of links. SO I WANT WHEN I CLICK SOME OF THIS LINK - to load the div productsPlace(which is in index() view) with the partial view which is returned from GetProducts() Action

Here is my GetCategories() View

@model IEnumerable<OnlineStore.Commercial.Models.CategoryViewModel>

@{
    ViewBag.Title = "Index";
}




    @foreach ( var tree in @Model)
    {
    <ul id="tree">
        <li>
            <a href="@Url.Action("GetProducts",  new { catID = tree.CategoryCode,langID= 1})">@tree.CategoryName</a>

        </li>
    </ul>
    }

解决方案

I would give all the <a> elements a class, say getProducts, and then bind a click event to them: (Forgive me for writing the url in the <% syntax)

So for the <a> elements:

<a href="javascript:void(0);" class="getProducts">@tree.CategoryName</a>

And for the click event binding:

$('.getProducts').on('click', function() {
     $('#productsPlace').load('<%=Url.Action("GetProducts", "YourController")%>', new { catID =  tree.CategoryCode,langID= 1}, null);
});

这篇关于在装载点击同一页面上的href链接局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！