그래서 무슨 일이야 : 나는 사전 있어야하는데 Umbraco 7 부모 템플릿을 가지고 있고 템플릿이없는 각 사전에 나오는 단어를했습니다검색 MVC/AJAX/jQuery로 Umbraco
doctype은 'leksi'라는 제목과 'perigrafileksis'라는 단어의 설명이 포함 된 서식있는 텍스트 편집기로 구성됩니다. 해당 페이지 상단에 검색 양식이 있습니다. 원래 단어가 있던 공간에서 페이지를 새로 고치지 않고 Umbraco에서 제목이나 설명을 검색 할 수있는 검색 양식을 원합니다. 쉽게 이해 사진 :
내가 MVC와 함께이 일을 해요 (또는 그것을 위해 노력할 것입니다)하지만 난 꽤 많이에도 W3Schools의 자습서와 같은을 읽은 후 AJAX를 사용하는 방법을 거의 생각.
지금까지 내가 가진 :
컨트롤러 :
using MyUmbraco.Models;
using System.Web.Mvc;
using Umbraco.Web.Mvc;
namespace MyUmbraco.Controllers
{
public class SearchDictionarySurfaceController : SurfaceController
{
// GET: SearchDictionarySurface
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult HandleDictionarySearching(SearchBarViewModel model)
{
if (!string.IsNullOrEmpty(model.query))
{
var query = Request.QueryString["query"];
//var url = Umbraco.Content("1409");
return CurrentUmbracoPage();
}
else
{
return new RedirectResult("/homePage/", false);
}
}
}
}
부분 :
@inherits Umbraco.Web.Mvc.UmbracoViewPage<SearchBarViewModel>
@using MyUmbraco.Controllers
@using MyUmbraco.Models
@using Umbraco.Web;
@{
var node = UmbracoContext.Current.PublishedContentRequest.PublishedContent;
}
@using (Html.BeginUmbracoForm<SearchDictionarySurfaceController>("HandleDictionarySearching", null, new { @class = "input-group input-lg add-on" }))
{
@Html.ValidationSummary(true)
@Html.AntiForgeryToken()
@*<form action="" method="post" target="_blank" class="input-group input-lg add-on searchbarbackground">*@
@Html.TextBoxFor(model => model.query, null, new { @class = "form-control searchbar", @method = "post", @target = "_blank", @id = "query" })
<div class="input-group-btn searchbutton">
<button class="btn" type="submit" tabindex="2" id="search">
@if (node == Umbraco.TypedContent(1254))
{
<img src="~/css/images/focal-lense-brown.png" />
}
else
{
<img src="~/css/images/focal-lense.png" />
}
</button>
</div>
@*</form>*@
}
<script>
//the script is the one that tells the controller to send the data to the model. If we don't have that, we can't do anything.
$(document).ready(function() {
$("#search").click(function (event) {
event.preventDefault();
xhttp.open("POST", "ajax_info.txt", true);
xhttp.send();
});
});
</script>
그리고 부분 검색 양식이 렌더링됩니다 실제 사전 페이지 :
<body>
@Html.Partial("_Navbar")
<div class="container plainwhite">
<div class="row">
<div class="col-md-12">
@{ Html.RenderPartial("_DictionarySearchBar", new SearchBarViewModel());}
</div>
</div>
<div class="row">
@foreach (var item in Model.Content.Descendants("lekseisDiatrofikouLeksikou"))
{
<div class="col-sm-3 styled">
<button data-id="@id" type="button" class="btn">
@(item.GetPropertyValue<string>("leksi"))
</button>
<div id="@("button-wrapper"+id)" class="col-xs-12 styled2 text-center nopadding">
@Html.Raw(item.GetPropertyValue<string>("perigrafiLeksis"))
</div>
</div>
id++;
}
</div>
</div>
@Html.Partial("_FooterMenu")
</body>
당신은 나를 위해 그것을 해결할 필요가 없습니다, 난 단지 그것의 논리를 이해하고 싶습니다. 비록 내가 찾지 못했기 때문에 당신이 원하는 것을하고있는 튜토리얼을 가르쳐 주셨다해도 좋을 것입니다.
질문은 AJAX의 논리가 무엇입니까? 원본 페이지와 동일한 결과를 렌더링하고 숨겨진 div 또는 무엇이 될 여분의 부분이 필요합니까? 나는 정말로 혼란 스럽다. 또한, 제출> 새로 고침 페이지를 방지하기 위해 JQuery가 필요하지만 거기에 무엇을 쓸지 모르겠다. 또한 AJAX는 스크립트 내에서 또는 페이지 내부에서? 아니면 별도의 파일로?
우리는 전쟁에서지고, 도움말을 보냅니다!
정말 인터넷의 역사에 아무런 문제도 없었습니다. – Jabberwocky