Question

我有以下代码

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTab">
       <li class="active"><a data-toggle="tab" href="#home1">ApplicantProcess</a></li>
       <li class="tab-red">@Html.ActionLink("Create", "Create", "ProcessApplicant", new {@id="AppliId",href="/ProcessApplicant/Create",data_toggle="tab" })</li>
    </ul>
</div>

这里的问题是我希望data_toggle也在ActionLink中。如果尝试使用jquery

$('#Applicant').click(function () {
    $(this).prop('href', '/ProcessApplicant/Create');
});

我在控制台中遇到语法错误。我正在使用选项卡，当单击特定选项卡时，我在特定选项卡中呈现局部视图。我甚至尝试在ActionLink（）中没有href属性但是没有工作.Plz帮助我如何在tab中使用带有data_toggle属性的ActionLink。感谢您的阅读

Answer 1

最简单的解决方案是将Html.ActionLink替换为<a>标记，然后您可以设置所需的属性。

<a href="@Url.Action("Create", "ProcessApplicant")" id="AppliId" data-toggle="tab">Create</a>

要在标签PartialView内呈现click，您可以使用类似的内容。（这是基于您的代码，还有其他方法可以做到这一点。）

$('#myTab li a[data-toggle="tab"]').click(function () {
    event.preventDefault(); // use to prevent navigating to other page
    var $anchor = $(this); // take the anchor that contains the partial view href

    var href = $anchor.attr('href');

    $.get(href, function (data) { // call the action that will return PartialView
        $('#tabContent').html(data + href); // replace with the content of PartialView
    });
});

注意：您无需在href="/ProcessApplicant/Create"内指定Html.ActionLink，它已基于现有路线构建href动态。

Answer 2

使用连字符提及HTML属性的另一种方法是使用字典对象。像这样，

<div class="tabbable">
    <ul class="nav nav-tabs" id="myTab">
       <li class="active"><a data-toggle="tab" href="#home1">ApplicantProcess</a></li>
       <li class="tab-red">@Html.ActionLink("Create", "Create", "ProcessApplicant", new Dictionary<string,Object> { {"id","AppliId"}, {"data_toggle","tab"} })</li>
    </ul>
</div>

希望它有所帮助，谢谢。

如何在ActionLink中使用jquery或在ActionLink（）中使用数据切换

2 个答案: