[번역]ASP.NET MVC 3 개발 의 20 가지 비법(18)[20 Recipes for Programming MVC 3]:자동 검색 완료
21011 단어 programming
http://www.cnblogs.com/o2ds/archive/2012/01/05/2312671.html
의제
구체 적 인 일 을 검색 할 때 입력 이 복잡 할 수 있 습 니 다(또는 오래 걸 릴 수 있 습 니 다).사용자 가 정확 한 내용 을 입력 하려 고 할 때 사용자 가 입력 한 내용 을 검색 하고 표시 하여 입력 과 검색 을 쉽게 찾 을 수 있 습 니 다.
해결 방안
JQuery 를 사용 하여 자동 으로 플러그 인 을 완성 하고 도서 목록 페이지 의 검색 기능 을 수정 하여 사용자 가 검색 을 입력 할 때 검색 결 과 를 즉시 표시 합 니 다.
토론 하 다.
자동 완성 플러그 인 은 기본적으로 MVC 프로젝트 의 JQuery 기본 패키지 에 포함 되 지 않 기 때문에 첫 번 째 작업 은 접근 입 니 다.http://jquery.com플러그 인 다운로드 하 러.이 플러그 인 은 자 바스 크 립 트 파일 하나 와 CSS 파일 두 개 를 포함 하고 있 습 니 다.새로 다운로드 한 파일 을"Scripts"폴 더 에 저장 합 니 다.CSS 파일 을'Content'폴 더 에 저장 합 니 다.
이 비결 도 보기 렌 더 링 부분 에 대한 내용 을 소개 한다.접근 성능 을 향상 시 키 기 위해 전역 공유 보기에 Ajax 와 당돌 하지 않 은 Ajax 파일,"main"이라는 CSS 파일 을 추가 하여 다른 보 기 를 불 러 올 때마다 이 파일 을 불 러 오지 않도록 합 니 다.공유 보기에 RenderSection()방법 을 추가 합 니 다.이것 은 각 보기 가 구체 적 인 상황 에 따라<헤드>탭 에 필요 한 자바 script 이나 CSS 파일 을 추가 할 수 있 도록 합 니 다.
수정 보기/공유/Layout.cshtml,새로운 방법 추가 RenderSection():
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"
type="text/javascript"></script>
@RenderSection("JavaScriptAndCSS", required: false)
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
[ @Html.ActionLink("English", "ChangeLanguage",
"Home", new { language = "en" }, null) ]
[ @Html.ActionLink("Français", "ChangeLanguage",
"Home", new { language = "fr" }, null) ]
</div>
<div id="menucontainer">
<ul id="menu">
<li>@Html.ActionLink("Home",
"Index", "Home")</li>
<li>@Html.ActionLink("About",
"About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
@RenderBody()
</div>
<div id="footer">
</div>
</div>
</body>
</html>주요 CSS 파일 과 jQuery 의 핵심 파일 만 공유 파일 에 불 러 옵 니 다.CSS 는 모든 페이지 에 필요 하기 때문에 jQuery 는 절대 다수의 페이지 에서 사 용 됩 니 다.그러나 우리 가 새로 인용 한 Ajax 의 jQuery 는 페이지 마다 요구 해 야 하 는 것 이 아니다.
현재 우 리 는 자동 완성 플러그 인 을 사용 하 는 두 가지 방법 이 있 습 니 다.
자 바스 크 립 트 에 데 이 터 를 보 내 서 검색 하기;
사용자 가 입력 할 때 Ajax 를 통 해 결 과 를 가 져 옵 니 다.
내 가 사용 하 는 느낌 으로 볼 때,나 는 해결 방안 1 의 자동 완성 방법 이 매우 빠르다 는 것 을 발견 했다.왜냐하면 그것 은 매번 데이터베이스 에서 데 이 터 를 요청 할 필요 가 없 기 때문이다.그러나 이 솔 루 션 은 데이터 양 에 제한 되 어 있 습 니 다.검색 내용 이 너무 많 을 때 사용자 페이지 로 딩 과 자바 script 방법 을 호출 할 때 로 딩 사용자 컴퓨터 의 운행 이 느 리 거나 대기 시간 이 너무 길 어 집 니 다.일부 잘못된 추적 실험 을 통 해 나 는 이 신기 한 숫자 가 대략 40000 개의 데이터 라 는 것 을 대체적으로 확정 할 수 있다.결과 수가 이 값 을 초과 하면 2 번 솔 루 션 을 사용 해 야 합 니 다.그렇지 않 으 면 항상 방안 1 을 고수 해 야 합 니 다.검색 할 때 순간의 체험 으로 가 벼 운 지연 이 없 도록 해 야 합 니 다.
이 예 에서 검색 할 책 은 40000 상한 선 을 넘 지 않 았 기 때문에 사용 방안 1 을 선택 하 겠 습 니 다.책 이름 목록 을 저장 하 는 ViewBag 변 수 를 만 들 려 면 Books Controller 를 수정 해 야 합 니 다.자동 으로 완 료 될 때 자바 script 의 배열 이 필요 합 니 다.이 책 들 의 이름 을"|"문자 로 나 누 어야 합 니 다.그리고 보기 에서 이 문자열 은 자바 script 의 Split()방법 으로 배열 대상 으로 변 환 됩 니 다.이 기능 을 수정 하면 사용자 가 검색 하고 싶 은 결 과 를 완전히 입력 하면 책의 일치 하 는 결 과 를 되 돌려 줍 니 다.사용 자 는 이 결 과 를 클릭 하면 이 책의 상세 한 페이지 로 자동 으로 재 설정 합 니 다.
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Linq.Dynamic;
using System.Web;
using System.Web.Mvc;
using MvcApplication4.Models;
using MvcApplication4.Utils;
using PagedList;
namespace MvcApplication4.Controllers
{
public class BooksController : Controller
{
private BookDBContext db = new BookDBContext();
//
// GET: /Books/
public ActionResult Index(string sortOrder,
string filter, string Keyword, int page = 1)
{
#region ViewBag Resources
...
#endregion
#region ViewBag Sort Params
...
#endregion
var books = from b in db.Books select b;
#region Keyword Search
if (!String.IsNullOrEmpty(Keyword))
{
books = books.Where(b => b.Title.ToUpper().
Contains(Keyword.ToUpper()) ||
b.Author.ToUpper().Contains(
Keyword.ToUpper()));
// Should we redirect because of only one result?
if (books.Count() == 1)
{
Book book = books.First();
return RedirectToAction("Details",
new { id = book.ID });
}
}
ViewBag.CurrentKeyword =
String.IsNullOrEmpty(Keyword) ? "" : Keyword;
#endregion
#region Filter switch
...
#endregion
books = books.OrderBy(sortOrder);
int maxRecords = 1;
int currentPage = page - 1;
// Get all book titles
ViewBag.BookTitles = FormatBooksForAutocomplete();
return View(books.ToPagedList(currentPage,
maxRecords));
}
private string FormatBooksForAutocomplete()
{
string bookTitles = String.Empty;
var books = from b in db.Books select b;
foreach (Book book in books)
{
if (bookTitles.Length > 0)
{
bookTitles += "|";
}
bookTitles += book.Title;
}
return bookTitles;
}
...
}
}마지막 으로 Books/Index 보 기 를 수정 하고 jQuery 가 자동 으로 완성 하 는 기능 을 추가 합 니 다.우선,@section 에 필요 한 자 바스 크 립 트 와 CSS 파일 을 포함 하 는 인용 을 사용 합 니 다.그리고 이전에 만 든 검색 텍스트 상자 의 ID 를'wordsearch'로 변경 합 니 다.마지막 으로 자동 으로 완 성 된 코드 를 검색 상자 아래 에 추가 합 니 다.이 자 바스 크 립 트 는 보기 의 아래쪽 에 의도 적 으로 놓 여 있 습 니 다.결과 의 수량 에 따라 이 자 바스 크 립 트 의'코드 블록(Blocking)'은 보기 에 영향 을 주지 않 고 사용자 의 컴퓨터 에 많은 처리 부 하 를 가 져 올 수 있 습 니 다.
@model PagedList.IPagedList<MvcApplication4.Models.Book>
@if (IsAjax)
{
Layout = null;
}
@section JavascriptAndCSS {
<link rel="stylesheet" href="
@Url.Content("~/Content/jquery.autocomplete.css")"
type="text/css" />
<script src="@Url.Content(
"~/Scripts/jquery.unobtrusive-ajax.min.js")"
type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content(
"~/Scripts/jquery.autocomplete.js")"></script>
}
...
@using (Html.BeginForm())
{
@:Search: @Html.TextBox("Keyword",
(string)ViewBag.CurrentKeyword,
new { id = "KeywordSearch" })
<input type="submit" value="Search" />
}
...
<script type="text/javascript">
$(document).ready(function () {
var data = "@ViewBag.BookTitles".split("|");
$("#KeywordSearch").autocomplete(data);
});
</script>두 번 째 방안 을 실현 하기 위해 Ajax 검색 은 자동 완성 방법 으로 배열 에 접근 하 는 것 이 아니 라 URL 을 통 해 검색 파 라 메 터 를 전달 합 니 다.이 URL 은 검색 문자열 변수'q'를 포함 합 니 다.이 변 수 는 사용자 가 입력 한 검색 값 을 포함 합 니 다.이것 은 서적 의 정보 와 일치 하 는 검색 을 실행 하고 되 돌아 오 는 내용 을 문자 구분자 로 구분한다.jQuery 문서 에는 완전한 예 와 관련 된 예 가 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
표준 Pascal 범위 내에서 Delphi 입문표준 Pascal (Standard Pascal) 에서 해설되고 있는 범위에서의 Delphi 는 어떻게 되어 있는지를, 문득 알고 싶어졌습니다. 이 기사는 ** "Delphi 콘솔 응용 프로그램에서 uses 절을 작...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
