Я хотел бы объединить вкладку, созданную из представления MVC, с обычной вкладкой, содержащей только HTML-элемент div, предназначенный для карты Google.

0

В отличие от других вопросов MVC и вкладок, я хотел бы объединить вкладку, созданную из MVC View, с обычной вкладкой, содержащей только html div, который предназначен для карты Google.

Я разместил свои вкладки в файле _Layout.cshtml:

<div id="tabs">
<ul>
    <li>@Html.ActionLink("Businesses", "Index", "Business")</li> 
    <li><a href="#tab1" id="MapTab">Map</a> </li>
</ul>
<div class="container" id="tab2" style="margin-left: 25px;">
    <div style="margin-left: 25px;">
        @RenderBody()
        @RenderSection("scripts", required: false)
    </div>
</div>
<div class="container" id="tab1" style="margin-left: 25px;">
<table id="tablegrid1">
<tr>
    <td>
        <div id="map" class="mapclass" style="width: 850px;height: 500px;">                                               
        </div>
    </td>
</tr>
</table>
</div>
</div>

У меня есть контроллер MVC для бизнеса. Business View использует _Layout.cshtml и не является частичным представлением. Таким образом, он почти работает, но каждый щелчок на вкладке перезагружает всю страницу, и он сбрасывает активную вкладку на первую, даже когда я нажимал на вторую.

Одна вещь, которая, как я думал, может работать, - это добавить дополнительный скрипт в Index.cshtml представления Business с помощью помощника. Это вставляет этот скрипт, чтобы выбрать вкладку "Бизнес" в начале страницы. Как обсуждалось в разделе "Использование разделов в шаблонах редактора/дисплея"

@Html.Script(
@<script src="@Url.Content("~/tuxmap/scripts/tabSelectBusinesses.js")" type="text/javascript"></script>)

Но недостатком этого является то, что когда я нажимаю на вкладку "Бизнес", а затем на карте, URL-адрес переключается на localhost: XXXX/Business и остается там вместо localhost: XXXX. Карта переключается нормально, но все это напуганно.

Какое правильное решение?

Теги:
razor
asp.net-mvc
asp.net-mvc-5

1 ответ

1
Лучший ответ

Ваша проблема в том, что вы используете actionlink, который всегда будет ссылаться на новую страницу. Попытайтесь сделать это вместо этого:

В UL

<li><a href="#business">business</a></li>

Контейнер для вкладки

<div id="business">
   @{
        Html.RenderAction("Index", "Business", new{ Id = Model.Id});
    }
</div>

это сделает частичное представление из индекса в бизнес-контроллере

контроллер

public PartialViewResult(int Id){
    return PartialView(...) and so on
}

Ajax update div

@using Ajax.BeginForm("action","controller", null, new AjaxOptions{UpdateTargetId = "yourDivIdToPutResultIn"}, new{id="frmEdit"}){
    <input type="hidden" value="@Model.PutInIdHere" name="Id" id="editId"/>
}

** Сценарий JS для запуска редактирования с помощью кнопки

$('#buttonId').click(function(){ 
    $('#editId').val('theIdYouWantToSend');
    $('#frmEdit').submit();
});

Также смотрите видеоролики с http://www.asp.net/mvc с правой стороны от множественного числа.

Этот ответ заставит вкладки работать, но на самом деле, его очиститель, чтобы избежать вкладок jquery с MVC

Поделиться
  • 0
    спасибо, что было на самом деле очень полезно. Есть еще кое-что, что я пытаюсь выяснить. Прежде всего это: Html.RenderAction («Индекс», «Бизнес»); и мне пришлось установить Layout = null в index.cshtml для бизнеса, чтобы сделать его частичным представлением. Попытка сделать вкладки поменять местами div прямо сейчас ... обновить немного ...
  • 0
    Хорошо, это сделало меня на шаг ближе, и я думаю, что вижу, как это может сработать. Большое спасибо. Я получил вкладки взад и вперед. Тем не менее, у меня есть некоторые ссылки CRUD в таблице индекса, которая отображается. В настоящее время они отображаются в разделе @RenderBody (), который я оставил под всей областью вкладок. Я действительно хотел бы иметь возможность нажать, скажем, ссылку «Изменить» и заменить таблицу индексов выводом Edit.cshtml. Так что, по сути, он все равно будет на вкладке «Бизнес», но Index.cshtml будет заменен на Edit.cshtml.
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню