VPF::Сделала поиск по сайту, как добавить AJAX ?

Karta

Дата 17.6.2013, 16:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

Доброго дня,
осваиваю ASP.Net
сделала простой поиск по сайту (по учебнику smile

)
Как мне добавить AJAX что бы результат поиска выводился без перезагрузки страницы?

Прилагаю свой код:

Контроллер:

Код


public ActionResult SearchMenu(string stringGenre, string searchString)
        {
            var GenreLst = new List<string>();

            var EngQry = from d in db.tas
                           orderby d.name_eng
                           select d.name_eng;
            GenreLst.AddRange(EngQry.Distinct());
            ViewBag.stringGenre = new SelectList(GenreLst);

           

            var strings = from m in db.tas
                         select m;         


            if (!String.IsNullOrEmpty(searchString))
            {
                strings = strings.Where(m => m.name_lat.ToUpper().Contains(searchString.ToUpper())||
                m.name_eng.ToUpper().Contains(searchString.ToUpper()));
            }

            if (string.IsNullOrEmpty(stringGenre))
                return View(strings);
            else
            {
                return View(strings.Where(x => x.name_eng == stringGenre));
            }
            
            
       }

И представление:

Код


@model IEnumerable<Example2.ta>


@{
    ViewBag.Title = ViewRes.AdminStrings.SearchMenu;
}


<form>
<center>
<div>
<h3>@ViewRes.AdminStrings.SearchNameInTheDatabase</h3>

 </div>  
<div>
@using (Html.BeginForm())
{
    <p> 
        
         @using (Html.BeginForm("SearchMenu","Admin",FormMethod.Get))
         {     
         <p>Eng: @Html.DropDownList("stringGenre", "All")
           <p>       
           Title: @Html.TextBox("SearchString")   
        <input type="submit" value="Search" /></p></p>
         }
    </p>
}

</div>
</center>
<div>
       @foreach (var item in Model) {
        <p>
        
        
            @Html.DisplayFor(modelItem => item.name_lat)
        </p>
         <p>
            @Html.DisplayFor(modelItem => item.name_eng)
        </p>
       
        }
</div>

</form>

Спасибо

jonie

Дата 20.6.2013, 10:47 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 5613
Регистрация: 21.8.2005
Где: Владимир

Репутация: 3
Всего: 118

1. выносите сам поиск в partial view, соотвественно получается надо добавить partial метод:

Код


public ActionResult SearchMenuPartial(string stringGenre, string searchString)
        {
//           blablabla  //
            if (string.IsNullOrEmpty(stringGenre))
                return PartialView(strings);
            else
            {
                return PartialView(strings.Where(x => x.name_eng == stringGenre));
            }
       }

Это вам вернет кусок html - результат поиска

2. добавляете собствено partial view

Код


<div>
@model IEnumerable<Example2.ta>
       @foreach (var item in Model) {
        <p>
            @Html.DisplayFor(modelItem => item.name_lat)
        </p>
         <p>
            @Html.DisplayFor(modelItem => item.name_eng)
        </p>
       
        }
</div>

3. код основной вьюхи переписываем так:

Код


@model IEnumerable<Example2.ta>
@{
    ViewBag.Title = ViewRes.AdminStrings.SearchMenu;
}
<form>
<center>
<div>
<h3>@ViewRes.AdminStrings.SearchNameInTheDatabase</h3>
 </div>  
<div>
@using (Html.BeginForm())
{
    <p> 
        
         @using (Html.BeginForm("SearchMenu","Admin",FormMethod.Get))
         {     
         <p>Eng: @Html.DropDownList("stringGenre", "All")
           <p>       
           Title: @Html.TextBox("SearchString")   
        <input type="submit" value="Search" id="SearchBtn"/></p></p>
         }
    </p>
}
</div>
</center>


<!-- !!! (я добавил див чтобы было удобнее) --->
<div id="SearchResult">
 @Html.Partial("SearchMenuPartial", Model)
</div>
<!-- !!! --->

</form>

на этом этапе у вас должно работать также как и было до этого.

4. добавляете код основной вьюхи методы получения partial вьюхи с заданными параметрами и вставки его в DOM дерево. Используя jquery как-то так:

Код


$(function() {
 $('#SearchBtn').click(function(e){
   e.preventDefault();
   var g = $('#stringGenre').val();
   var s = $('#SearchString').val();

   $.get('@Url.Action("SearchMenuPartial")', {stringGenre: g, searchString:s })
    .done(function(data)) {
     $('#SearchResult').html(data);
   }
   .fail(function() {alert('fail!');});
 });
});

а воообще у MS есть приблуды в виде AJAX хелперов, но лично я их жутко не люблю.... но погуглить стоит - ищите Html.AjaxForm, что-то вроде:

Код


<div id="target">
 @using (Ajax.BeginForm("MyAction", "MyController",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "target"
            }))
 {
      <!-- whatever -->
 }
 </div>

--------------------

Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...

Karta

Дата 24.6.2013, 15:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

У меня все равно страница перезагружается ... не помагает скрипт.
Впрописываю главное представление.

Код


@model IEnumerable<Example2.ta>


@{
    ViewBag.Title = ViewRes.AdminStrings.SearchMenu;
}

<script type="text/javascript">
    $(function() {
        $('#SearchBtn').click(function(e){
            e.preventDefault();
            var g = $('#stringGenre').val();
            var s = $('#SearchString').val();
            $.get('@Url.Action("SearchMenuPartial")', {stringGenre: g, searchString:s })
    .done(function(data)) {
     $('#SearchResult').html(data);
    }
   .fail(function() {alert('fail!');});
 });
   });
</script>
<form>
<center>
<div>
<h3>@ViewRes.AdminStrings.SearchNameInTheDatabase</h3>

 </div>  
<div>
@using (Html.BeginForm())
{
    <p> 
        
         @using (Html.BeginForm("SearchMenu","Admin",FormMethod.Get))
         {     
         <p>Cze: @Html.DropDownList("stringGenre", "All")
           <p>       
           Title: @Html.TextBox("SearchString")   
        <input type="submit" value="Search" id="SearchBtn" /></p></p>
         }
    </p>
}

</div>
</center>

<div id="SearchResult">
 @Html.Partial("SearchMenuPartial", Model)
</div>
</form>

Это сообщение отредактировал(а) Karta - 24.6.2013, 15:47

jonie

Дата 24.6.2013, 22:26 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 5613
Регистрация: 21.8.2005
Где: Владимир

Репутация: 3
Всего: 118

ну ок, вот вам пример готовый - по нему проще разобраться...
http://ge.tt/4ND0AAk/v/0
зеркало: http://zalil.ru/upload/34603482
и еще зеркало: http://rusfolder.com/36982431

--------------------

Что-то не поняли? -> Напейтесь до зеленых человечков... эта сверхцивилизация Вам поможет...

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Разработка под ASP.NET \| Следующая тема »