জ্যাকোরি এজ্যাক্সের সাথে এএসপি.নেট এমভিসি বৈধতা ব্যবহার করবেন?

Question

আমার কাছে সহজ এএসপি.নেট এমভিসি অ্যাকশন রয়েছে:

public ActionResult Edit(EditPostViewModel data)
{

}

এর EditPostViewModelমতো বৈধতা বৈশিষ্ট্য রয়েছে:

[Display(Name = "...", Description = "...")]
[StringLength(100, MinimumLength = 3, ErrorMessage = "...")]
[Required()]
public string Title { get; set; }

দর্শনে আমি নিম্নলিখিত সহায়কগুলি ব্যবহার করছি:

 @Html.LabelFor(Model => Model.EditPostViewModel.Title, true)

 @Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                        new { @class = "tb1", @Style = "width:400px;" })

আমি যদি এমন কোনও ফর্মটিতে জমা দিই যে এই পাঠ্যবক্সটি একটি বৈধকরণে স্থাপন করা হয়েছে তবে প্রথমে ক্লায়েন্ট এবং তারপরে পরিষেবাতে করা হবে ModelState.IsValid।

এখন আমি বেশ কয়েকটি প্রশ্ন পেয়েছি:

1. এর পরিবর্তে কি jQuery এজ্যাক্স জমা দিয়ে ব্যবহার করা যেতে পারে? আমি যা করছি তা হ'ল ফর্মটি সরিয়ে ফেলা এবং সাবমিট বাটনে ক্লিক করে একটি জাভাস্ক্রিপ্ট ডেটা সংগ্রহ করবে এবং তারপরে চালাও $.ajax।

2. সার্ভার পাশ ModelState.IsValidকাজ করবে?

3. আমি কীভাবে বৈধতার সমস্যাটিকে ক্লায়েন্টের কাছে ফরোয়ার্ড করতে এবং এটিকে উপস্থাপন করতে পারি যদি আমি বিল্ড ইন্ট বৈধতা ( @Html.ValidationSummary(true)) ব্যবহার করছি?

আজাক্স কলের উদাহরণ:

function SendPost(actionPath) {
    $.ajax({
        url: actionPath,
        type: 'POST',
        dataType: 'json',
        data:
        {
            Text: $('#EditPostViewModel_Text').val(),
            Title: $('#EditPostViewModel_Title').val() 
        },
        success: function (data) {
            alert('success');
        },
        error: function () {
            alert('error');
        }
    });
}

সম্পাদনা 1:

পৃষ্ঠায় অন্তর্ভুক্ত:

<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

Comments

নীচে সুন্দর উত্তর। এখানে একটি সম্পর্কিত প্রশ্ন। উত্তরটি ক্লায়েন্ট-সাইড বা সার্ভার-সাইডের বৈধতার জন্য অনুমতি দেয়। আমি তাদের সরবরাহিত JQuery কোডটির প্রেমে আছি। (না, এটি আমার উত্তর ছিল না)) স্ট্যাকওভারফ্লো

— দু: সাহসিক কাজ

Answer 1

মক্কেলের পক্ষে

jQuery.validateলাইব্রেরি ব্যবহার করে সেট আপ করা বেশ সহজ হওয়া উচিত।

আপনার Web.configফাইলে নিম্নলিখিত সেটিংস উল্লেখ করুন:

<appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings>

আপনি যখন নিজের দৃষ্টিভঙ্গি তৈরি করবেন, আপনি এই জাতীয় জিনিসগুলি সংজ্ঞায়িত করবেন:

@Html.LabelFor(Model => Model.EditPostViewModel.Title, true)
@Html.TextBoxFor(Model => Model.EditPostViewModel.Title, 
                                new { @class = "tb1", @Style = "width:400px;" })
@Html.ValidationMessageFor(Model => Model.EditPostViewModel.Title)

দ্রষ্টব্য: এগুলি একটি ফর্ম উপাদান মধ্যে সংজ্ঞায়িত করা প্রয়োজন

তারপরে আপনাকে নিম্নলিখিত গ্রন্থাগারগুলি অন্তর্ভুক্ত করতে হবে:

<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>

এটি আপনাকে ক্লায়েন্টের পক্ষের বৈধতার জন্য সেট আপ করতে সক্ষম হওয়া উচিত

সম্পদ

• http://msdn.microsoft.com/en-us/vs2010trainingcourse_aspnetmvccustomvalidation_topic5.aspx

সার্ভার সাইড

দ্রষ্টব্য: এটি কেবলমাত্র jQuery.validationলাইব্রেরির শীর্ষে অতিরিক্ত সার্ভার পার্শ্বের বৈধতার জন্য

সম্ভবত এর মতো কিছু সাহায্য করতে পারে:

[ValidateAjax]
public JsonResult Edit(EditPostViewModel data)
{
    //Save data
    return Json(new { Success = true } );
}

ValidateAjaxবৈশিষ্ট্যটি কোথায় সংজ্ঞায়িত করা হয়:

public class ValidateAjaxAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (!filterContext.HttpContext.Request.IsAjaxRequest())
            return;

        var modelState = filterContext.Controller.ViewData.ModelState;
        if (!modelState.IsValid)
        {
            var errorModel = 
                    from x in modelState.Keys
                    where modelState[x].Errors.Count > 0
                    select new
                           {
                               key = x,
                               errors = modelState[x].Errors.
                                                      Select(y => y.ErrorMessage).
                                                      ToArray()
                           };
            filterContext.Result = new JsonResult()
                                       {
                                           Data = errorModel
                                       };
            filterContext.HttpContext.Response.StatusCode = 
                                                  (int) HttpStatusCode.BadRequest;
        }
    }
}

এটি যা করে তা হ'ল আপনার সমস্ত মডেলের ত্রুটি উল্লেখ করে একটি জেএসওএন অবজেক্ট return

উদাহরণ প্রতিক্রিয়া হবে

[{
    "key":"Name",
    "errors":["The Name field is required."]
},
{
    "key":"Description",
    "errors":["The Description field is required."]
}]

এটি $.ajaxকলটির কলব্যাক পরিচালনা করতে আপনার ত্রুটিটি ফিরে আসবে

ফিরে আসা চাবিগুলির উপর ভিত্তি করে ত্রুটি বার্তাগুলি সেট করার জন্য আপনি ফিরে আসা ডেটাটি লুপ করতে পারেন (আমার মনে হয় কিছু $('input[name="' + err.key + '"]')আপনার ইনপুট উপাদানটি খুঁজে পেতে পারে

Comments

দুর্দান্ত উত্তর, বিশেষত দুরন্ত ValidateAjaxAttribute সহ! ধন্যবাদ!

— রেনি

আমি বুঝতে পারছি না কেন এই উত্তরটি এত বেশি ভোট পেয়েছে। এটি প্রশ্নের 1 এর উত্তর দেয় না: $ .axax এর সাথে পোস্ট করার সময় ক্লায়েন্টের বৈধতা কীভাবে করবেন? আমি মনে করি @ শাইজু উত্তর এটিতে সহায়তা করে।

— ভ্যালেন্টিন

@ ভ্যালেন্টিন - আমার উত্তরটি যদিও সহায়তা করে কারণ ডেটাটি সার্ভারের পাশাপাশি রয়েছে is বৈধতা প্লাগইনগুলি ফর্মটি পূরণ করার সাথে সাথে গতিশীল বৈধতা সক্ষম করতে হবে এবং ফর্মটি জমা দেওয়ার পরে (তবে ওপি এটি করতে চায়), সার্ভার চূড়ান্ত বৈধতা সরবরাহ করবে, যেহেতু ক্লায়েন্ট সাইডের বৈধতা বাইপাস করা যায় সেহেতু এটি সর্বোত্তম।

— অ্যান্ড্রু বুর্গেস

আমি ফিরে আসা ত্রুটিগুলি লুপ করে এবং সঠিক সময়ে ত্রুটি বার্তাটি byুকিয়ে jQuery এর বৈধতা বার্তা স্প্যানগুলি ব্যবহার করি:for (var i = 0; i < modelStateErrors.length; i++) { $('span[data-valmsg-for="' + modelStateErrors[i].key + '"]').text(modelStateErrors[i].errors[0]); }

— ইয়ান

এই উত্তর দুর্দান্ত! তবে আমি এখনও মনে করি ASP.NET MVC কাঠামোটি এটি করার একটি অন্তর্নির্মিত উপায় সরবরাহ করা উচিত।

— জিগান্ড

Answer 2

আপনার যা করা উচিত তা হ'ল আপনার ফর্ম ডেটাটি ক্রমিক করে কন্ট্রোলার অ্যাকশনে প্রেরণ করা। এএসপি.এনইটি এমভিসি ফর্ম ডেটাগুলিকে আবদ্ধ করবেEditPostViewModel এমভিসি মডেল বাইন্ডিং বৈশিষ্ট্যটি ব্যবহার অবজেক্টের (আপনার ক্রিয়া পদ্ধতি পরামিতি) ।

আপনি ক্লায়েন্ট পক্ষ থেকে আপনার ফর্মটি যাচাই করতে পারেন এবং যদি সবকিছু ঠিক থাকে তবে সার্ভারে ডেটা প্রেরণ করুন। valid()পদ্ধতি উপকারে আসবে।

$(function () {

    $("#yourSubmitButtonID").click(function (e) {

        e.preventDefault();
        var _this = $(this);
        var _form = _this.closest("form");

        var isvalid = _form .valid();  // Tells whether the form is valid

        if (isvalid)
        {           
           $.post(_form.attr("action"), _form.serialize(), function (data) {
              //check the result and do whatever you want
           })
        }

    });

});

Comments

ধন্যবাদ! আমি এই $ ("ফর্ম #" + ফর্মআইডি) চেষ্টা করেছি। বৈধতা () তবে এটি ফর্মটি (যা পাওয়া যায়) এর একটি বৈধতা () নেই?

— আইভী

সম্পাদনা 1 দেখুন যেখানে আমি দেখাব যে ওয়েবপৃষ্ঠায় বৈধতা স্ক্রিপ্ট অন্তর্ভুক্ত রয়েছে। আমি আরও দেখতে পাচ্ছি যে নিয়মিত ইনপুট টাইপের জমা বোতামটি ব্যবহার করার সময় বৈধতা চলছে।

— আইভী

আমি সমস্যাটি পেয়েছি (স্ক্রিপ্টগুলি সরানো হয়েছে master মাস্টারপেজ থেকে রেন্ডার)। কিন্তু এখনও ক্লায়েন্টকে মডেলস্টেট বৈধতা ত্রুটিগুলি ফেরত পাঠাতে সমস্যা আছে? আমি কীভাবে ঠাপাতে পারি? উদাহরণস্বরূপ যদি ব্যবহারকারী আর লগইন না করে থাকে (ModelState.AddModelError ("CustomError", "বৈধতা পাঠ্য")

— আইভী

আপনাকে আপনার পৃষ্ঠায় jquery.uthorate এবং jquery.uthorate.unobtrusive জেএস ফাইলগুলি অন্তর্ভুক্ত করতে হবে। আপনার এইচটিএমএল ইনপুটগুলিতে কোন বৈধতা প্লাগইনগুলির সন্ধানের বৈশিষ্ট্য রয়েছে?

— শিজু

আইভী: আপনার রিটার্নের ধরণ (অ্যাকশনResult) জসনরসাল্টের একটি বেস ক্লাস। যাতে এটি JSON ডেটা ফেরত দিতে পারে। আপনার যা করা উচিত তা হ'ল এটি যদি একটি এজাক্স কল হয় (অনুরোধ করুন। আইজএজ্যাক্স পরীক্ষা করুন), বৈধতা ত্রুটিগুলি পান এবং একটি জেএসওএন তৈরি করে ক্লায়েন্টকে ফেরত পাঠান। P। পোষ্টের কলব্যাক পদ্ধতিতে জসনটি দেখুন এবং ত্রুটি বার্তাগুলি দেখান।

— শিজু

Answer 3

এখানে বরং একটি সহজ সমাধান:

নিয়ামকটিতে আমরা আমাদের ত্রুটিগুলি এর মতো ফিরিয়ে দিই:

if (!ModelState.IsValid)
        {
            return Json(new { success = false, errors = ModelState.Values.SelectMany(x => x.Errors).Select(x => x.ErrorMessage).ToList() }, JsonRequestBehavior.AllowGet);
        }

এখানে ক্লায়েন্ট স্ক্রিপ্ট কিছু:

function displayValidationErrors(errors)
{
    var $ul = $('div.validation-summary-valid.text-danger > ul');

    $ul.empty();
    $.each(errors, function (idx, errorMessage) {
        $ul.append('<li>' + errorMessage + '</li>');
    });
}

এটি আমরা এজ্যাক্সের মাধ্যমে পরিচালনা করি:

$.ajax({
    cache: false,
    async: true,
    type: "POST",
    url: form.attr('action'),
    data: form.serialize(),
    success: function (data) {
        var isSuccessful = (data['success']);

        if (isSuccessful) {
            $('#partial-container-steps').html(data['view']);
            initializePage();
        }
        else {
            var errors = data['errors'];

            displayValidationErrors(errors);
        }
    }
});

এছাড়াও, আমি নিম্নলিখিত উপায়ে আজাক্সের মাধ্যমে আংশিক দৃষ্টিভঙ্গি রেন্ডার করছি:

var view = this.RenderRazorViewToString(partialUrl, viewModel);
        return Json(new { success = true, view }, JsonRequestBehavior.AllowGet);

রেন্ডাররাজোরভিউটোস্ট্রিং পদ্ধতি:

public string RenderRazorViewToString(string viewName, object model)
    {
        ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
                                                                     viewName);
            var viewContext = new ViewContext(ControllerContext, viewResult.View,
                                         ViewData, TempData, sw);
            viewResult.View.Render(viewContext, sw);
            viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
            return sw.GetStringBuilder().ToString();
        }
    }

Comments

আপনার "গেটমোডেলস্টেটেরটিস" এটিকে সহজ সরল একক-লাইন বিবৃতিতে রূপান্তরিত করে পুরোপুরি সহজ করা যেতে পারে: ModelState.Values.SelectMany (x => x.Erferences) .Select (x => x.ErrorMessage) .ToList ();

— ক্যামিলো তেরেভিনতো

PartialViewএজ্যাক্সে রেন্ডার করার জন্য কেন কেবল একটি ফেরত আসবে না?

— সিঞ্জাই

Answer 4

@ অ্যান্ড্রু বুর্গেস সরবরাহিত সমাধানে আরও কিছু যুক্তি যুক্ত করেছেন। এখানে সম্পূর্ণ সমাধান:

এজ্যাক্স অনুরোধের জন্য ত্রুটি পেতে একটি অ্যাকশন ফিল্টার তৈরি করেছে:

public class ValidateAjaxAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            if (!filterContext.HttpContext.Request.IsAjaxRequest())
                return;

            var modelState = filterContext.Controller.ViewData.ModelState;
            if (!modelState.IsValid)
            {
                var errorModel =
                        from x in modelState.Keys
                        where modelState[x].Errors.Count > 0
                        select new
                        {
                            key = x,
                            errors = modelState[x].Errors.
                                                          Select(y => y.ErrorMessage).
                                                          ToArray()
                        };
                filterContext.Result = new JsonResult()
                {
                    Data = errorModel
                };
                filterContext.HttpContext.Response.StatusCode =
                                                      (int)HttpStatusCode.BadRequest;
            }
        }
    }

আমার নিয়ামক পদ্ধতিতে ফিল্টারটি এতে যুক্ত করা হয়েছে:

[HttpPost]
// this line is important
[ValidateAjax]
public ActionResult AddUpdateData(MyModel model)
{
    return Json(new { status = (result == 1 ? true : false), message = message }, JsonRequestBehavior.AllowGet);
}

Jquery বৈধতা জন্য একটি সাধারণ স্ক্রিপ্ট যুক্ত:

function onAjaxFormError(data) {
    var form = this;
    var errorResponse = data.responseJSON;
    $.each(errorResponse, function (index, value) {
        // Element highlight
        var element = $(form).find('#' + value.key);
        element = element[0];
        highLightError(element, 'input-validation-error');

        // Error message
        var validationMessageElement = $('span[data-valmsg-for="' + value.key + '"]');
        validationMessageElement.removeClass('field-validation-valid');
        validationMessageElement.addClass('field-validation-error');
        validationMessageElement.text(value.errors[0]);
    });
}

$.validator.setDefaults({
            ignore: [],
            highlight: highLightError,
            unhighlight: unhighlightError
        });

var highLightError = function(element, errorClass) {
    element = $(element);
    element.addClass(errorClass);
}

var unhighLightError = function(element, errorClass) {
    element = $(element);
    element.removeClass(errorClass);
}

অবশেষে ত্রুটি জাভাস্ক্রিপ্ট পদ্ধতিটি আমার অ্যাজাক্স বিগ ফর্মটিতে যুক্ত করেছে:

@model My.Model.MyModel
@using (Ajax.BeginForm("AddUpdateData", "Home", new AjaxOptions { HttpMethod = "POST", OnFailure="onAjaxFormError" }))
{
}

Answer 5

আপনি এটি এইভাবে করতে পারেন:

( সম্পাদনা করুন) বিবেচনা করে আপনি যে প্রতিক্রিয়াটির jsonসাথে অপেক্ষা করছেনdataType: 'json' )

.NET

public JsonResult Edit(EditPostViewModel data)
{
    if(ModelState.IsValid) 
    {
       // Save  
       return Json(new { Ok = true } );
    }

    return Json(new { Ok = false } );
}

জাতীয়:

success: function (data) {
    if (data.Ok) {
      alert('success');
    }
    else {
      alert('problem');
    }
},

আপনার যদি প্রয়োজন হয় তবে আমি ত্রুটি 500 টি ফিরিয়ে কীভাবে এটি করব তাও ব্যাখ্যা করতে পারি এবং ইভেন্ট ত্রুটিতে ত্রুটি পেয়েছি (এজাক্স)। তবে আপনার ক্ষেত্রে এটি একটি বিকল্প হতে পারে

Comments

আমি জানি কীভাবে একটি নিয়মিত জেসন অনুরোধ করতে হয়, তবে এটি আমাকে বিচ্ছিন্ন বৈশিষ্ট্যের বৈধতা প্রদান করতে বা এএসপি.নেট এমভিসি বৈধকরণের জন্য বিল্টটি ব্যবহার করতে সহায়তা করবে না। প্রতিটি যথাযথের জন্য বৈধতা ত্রুটিগুলি ব্যাখ্যা করার জন্য আমি সম্ভবত একটি জটিল জেসন অবজেক্টটি তৈরি করতে পারি তবে এটি কাজটি অনেক বেশি হবে এবং আমি আশা করছি যে আপনি এটির জন্য এএসপি.নেট এমভিসি বৈধতাটির বিল্ট ইন কার্যকারিতাটি পুনরায় ব্যবহার করতে পারবেন?

— আইভী

1 - কীভাবে আপনার "সেন্ডপস্ট" ফাংশনটি চালাবেন ?, এবং 2 - ক্লায়েন্টে আপনার বৈধ ডেটা?

— andres descalzo

প্লিজ কি বুঝিয়ে বলবেন? আপনার শেষ পোস্ট পাবেন না?

— আইভী