Ajax.BeginFormAsp.net MVC 3 এর মধ্যে ব্যবহারের কোনও টিউটোরিয়াল বা কোড উদাহরণ রয়েছে যেখানে অযৌক্তিক বৈধতা এবং আজাক্স বিদ্যমান?
এটি এমভিসি 3 এর জন্য একটি অধরা বিষয় এবং আমি আমার ফর্মটি সঠিকভাবে কাজ করতে পারে বলে মনে করতে পারি না। এটি একটি আজাক্স জমা দেবে তবে বৈধতা ত্রুটি উপেক্ষা করবে।
উত্তর:
উদাহরণ:
মডেল:
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}নিয়ন্ত্রক:
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("Thanks", "text/html");
}
}দেখুন:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}এবং এখানে একটি ভাল (আমার দৃষ্টিকোণে) উদাহরণ:
দেখুন:
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Html.BeginForm())
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}index.js:
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#result').html(result);
}
});
}
return false;
});
});যা jQuery ফর্ম প্লাগইন দিয়ে আরও বাড়ানো যেতে পারে ।
আমি মনে করি যে সমস্ত উত্তর একটি গুরুত্বপূর্ণ পয়েন্ট মিস করেছে:
আপনি যদি আজাক্স ফর্মটি ব্যবহার করেন যাতে এটি নিজেকে আপডেট করার প্রয়োজন হয় (এবং ফর্মের বাইরে অন্য ডিভ নয়) তবে আপনাকে ফর্মটির বহিরাগত ডিভ বহন করা উচিত । উদাহরণ স্বরূপ:
<div id="target">
@using (Ajax.BeginForm("MyAction", "MyController",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target"
}))
{
<!-- whatever -->
}
</div>অন্যথায় আপনি @ ডেভিডের মতো শেষ হবেন যেখানে ফলাফলটি নতুন পৃষ্ঠায় প্রদর্শিত হবে।
UnobtrusiveJavaScriptEnabledকোথাও সত্যে স্থির হয়ে
আমি ডারিনের সমাধানটি শেষ পর্যন্ত কাজ করেছিলাম তবে প্রথমে কয়েকটি ভুল করেছিলাম যার ফলস্বরূপ ডেভিডের মতোই সমস্যা হয়েছিল (ডারিনের সমাধানের নীচে দেওয়া মন্তব্যে) যেখানে ফলাফলটি নতুন পৃষ্ঠায় পোস্ট করা হয়েছিল।
কারণ পদ্ধতিটি ফিরে আসার পরে আমাকে ফর্মটি দিয়ে কিছু করতে হয়েছিল, আমি এটি পরবর্তী ব্যবহারের জন্য সংরক্ষণ করেছি:
var form = $(this);তবে, এই ভেরিয়েবলটির "ক্রিয়া" বা "পদ্ধতি" বৈশিষ্ট্য নেই যা এজ্যাক্স কলটিতে ব্যবহৃত হয়।
$(document).on("submit", "form", function (event) {
var form = $(this);
if (form.valid()) {
$.ajax({
url: form.action, // Not available to 'form' variable
type: form.method, // Not available to 'form' variable
data: form.serialize(),
success: function (html) {
// Do something with the returned html.
}
});
}
event.preventDefault();
});পরিবর্তে আপনার "এই" পরিবর্তনশীলটি ব্যবহার করতে হবে:
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (html) {
// Do something with the returned html.
}
});jQueryএটি নির্বাচক হিসাবে ফর্ম সহ বস্তু সেট করেছেন । form[0]বৈশিষ্ট্য হবে। যেকোন jQueryভেরিয়েবলকে $আরও সহজে চিহ্নিত করার জন্য উপসর্গ করা ভাল অনুশীলন ।
ডারিন দিমিত্রভের সমাধানটি আমার এক ব্যতিক্রম ব্যতীত কাজ করেছিল। আমি যখন (উদ্দেশ্যমূলক) বৈধতা ত্রুটি সহ আংশিক ভিউ জমা দিয়েছি, তখন ডুপ্লিকেট ফর্মগুলি ডায়ালগটিতে ফেরত দিয়ে শেষ করেছি:
এটি ঠিক করতে আমাকে এইচটিএমএল.বাগিনফর্মটি একটি ডিভের মধ্যে আবদ্ধ করতে হয়েছিল:
<div id="myForm">
@using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
{
//form contents
}
</div>ফর্মটি জমা দেওয়া হলে, আমি সাফল্য ফাংশন এবং বৈধতাযুক্ত ফর্ম আউটপুট ডিভ সাফ:
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#myForm').html('');
$('#result').html(result);
}
});
}
return false;
});
});Partial Viewsসূচী পৃষ্ঠার নীচে তৈরি ক্রিয়াকলাপটি রেন্ডার করতে ব্যবহার করছি । আমি আংশিক দৃশ্যে সমস্ত বৈধতা বার্তা পেতে পারি। তবে Createসফল হলে সূচকটি দু'বার প্রদর্শিত হয়। Html.BeginFormআমার ইনডেক্স ভিউতে আমার কোনও নেই ।
UpdateTargetId = "myForm"পরিবর্তে ব্যবহার করার চেষ্টা করুন
যদি কোনও ডেটা বৈধতা উত্সাহিত হয় না, বা সামগ্রীটি সর্বদা একটি নতুন উইন্ডোতে ফিরে আসে তবে নিশ্চিত করুন যে এই 3 টি লাইন দর্শনের শীর্ষে রয়েছে:
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>উদাহরণ
// মডেল ইন
public class MyModel
{
[Required]
public string Name{ get; set; }
}// পার্টাইলভিউ // পার্টেলভিউ.সি.এইচটিএমএলে
@model MyModel
<div>
<div>
@Html.LabelFor(model=>model.Name)
</div>
<div>
@Html.EditorFor(model=>model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>ইনডেক্স। সিএসটিএমএল ভিউতে
@model MyModel
<div id="targetId">
@{Html.RenderPartial("PartialView",Model)}
</div>
@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" }))
{
<div>
<input type="submit" value="Add Unit" />
</div>
}নিয়ামক মধ্যে
public ActionResult Index()
{
return View(new MyModel());
}
public string AddName(MyModel model)
{
string HtmlString = RenderPartialViewToString("PartailView",model);
return HtmlString;
}
protected string RenderPartialViewToString(string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = ControllerContext.RouteData.GetRequiredString("action");
ViewData.Model = model;
using (StringWriter sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}আপনাকে ভিউনাম এবং মডেলটি রেন্ডার পার্টিশিয়ালভিউটোস্ট্রিং পদ্ধতিতে পাস করতে হবে। এটি আপনাকে যাচাইকরণের সাথে দেখাটি ফিরিয়ে দেবে যা আপনি মডেলটিতে প্রয়োগ করেছেন এবং সূচিপত্রশীটটিএমএলে "টার্গেটআইডি" বিভাগে সামগ্রী যুক্ত করতে পারেন। আমি এইভাবে আংশিক দৃশ্যের রেন্ডারএইচটিএমএল ধরে আপনি বৈধতা প্রয়োগ করতে পারেন।
জাভাস্ক্রিপ্ট ব্যবহার করে অ্যাজাক্স ফর্মগুলি অবিচ্ছিন্নভাবে কাজ করে। সুতরাং এটি প্রয়োজন, কার্যকর করার জন্য স্ক্রিপ্ট ফাইলগুলি লোড করা। যদিও এটি একটি ছোট পারফরম্যান্স সমঝোতার পরেও পোস্টব্যাক ছাড়াই সম্পাদন ঘটে।
আমাদের এইচটিএমএল এবং এজাক্স উভয় ফর্মের আচরণের মধ্যে পার্থক্য বুঝতে হবে।
আয়াক্স:
ফর্মটি পুনর্নির্দেশ করবেন না, এমনকি আপনি একটি পুনর্নির্দেশও করেন ()।
তাত্পর্যপূর্ণভাবে সংরক্ষণ, আপডেট এবং যেকোন সংশোধন কার্য সম্পাদন করবে।
এইচটিএমএল:
ফর্মটি পুনর্নির্দেশ করবে।
সিঙ্ক্রোনস এবং অ্যাসিনক্রোনালি উভয় অপারেশন সম্পাদন করবে (কিছু অতিরিক্ত কোড এবং যত্ন সহ)।
নীচের লিঙ্কে একটি POC এর সাথে পার্থক্য প্রদর্শন করে। লিংক
অ্যাজাক্স.বেগিনফর্ম যুক্ত করার আগে। উল্লিখিত ক্রমে আপনার প্রকল্পে নীচের স্ক্রিপ্টগুলি যুক্ত করুন,
Ajax অপারেশন করার জন্য কেবল এই দুটিই যথেষ্ট।