MVC Bootstrap modal show validation result

Question

The problem:

I want to preform submit to form that is in modal and if validation faild to get the error message on the modal.

I'm using ajax validation (jQuery) as detailed here

Is there an elegant way to perform submit but on faild stay at modal to show error message?

My code:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(Cam c)
    {
        ViewBag.id = c.id;

        using (Entities db = new Entities())
        {
            if (ModelState.IsValid)
            {
                db.camp.Add(c);
                db.SaveChanges();
                return RedirectToAction("Index", new { id = c.id });
            }

        }
        return null;
    }

Client:

@using (Html.BeginForm("Create", "Camp", FormMethod.Post, new { model = 
Model }))
{
@Html.AntiForgeryToken()

<dt>
            name:
        </dt>
        <dd>
            @Html.TextBoxFor(model => model.name, new { @class = "form-control", @placeholder = "name", @id = "txtVenueID", style = "width:150px" })
        </dd>

        <dd>
            @Html.ValidationMessageFor(model => model.name)
        </dd>
<div class="modal-footer ">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
}

Model:

public partial class Cam
{

    [Display(Name = "Name")]
    [Required(ErrorMessage = "Require {0}")]
    string name { get; set; }
}

replace `return null` with `return view(c);`. But what is `[ValidateAjax]`? Are you making an ajax call to submit the modal? — , Nov 08 '17 at 08:09
@StephenMuecke you right i didnt noticed that, i was rephrased my question the question remains because on submit i want server validation and the modal stay depends the validation result — shdr, Nov 08 '17 at 08:28
If you have correctly implemented client side validation then you will not be able to submit the form is its invalid. But because client side validation can be bypassed, you need to return the view if `ModelState` is invalid. But since its a modal, then you would need a bit of javascript to open that modal when its returned. — , Nov 08 '17 at 08:32
But its still a bit unclear what your doing here. Typically with a model form you use ajax to submit, so why are you using a modal? — , Nov 08 '17 at 08:33
Ajax was my first thought to get validation-error-message on modal (this problem wasn't in regular view because the view with the message dont need javascript involve) i try to avoid javascript involve. — shdr, Nov 08 '17 at 08:38
You don't need ajax to get the error messages - they will be shown automatically when you click the submit button (and the submit will be cancelled) assuming you have implemented client side validation correctly — , Nov 08 '17 at 08:40
yes, but like you said i need javascript to open the view returned in modal — shdr, Nov 08 '17 at 08:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158482/discussion-between-stephen-muecke-and-shdr). — , Nov 08 '17 at 08:47

score 0 · Answer 1 · answered Nov 12 '17 at 13:17

Show the first form in modal via the action that build it but keep the model state errors - use This
For view to submit the form but keep result on the modal use the following:
```
<button type="submit" class="btn btn-primary">Save</button>
```

Javascript to get the submit result into the modal:

$(function () {
    $.ajaxSetup({ cache: false });

    $(':submit[data-modal]').on("click", function (e) {
    e.preventDefault();
    var linkObj = $(this).closest('form');
        $.ajax({ // create an AJAX call...
            data: linkObj.serialize(), // get the form data
            type: linkObj.attr('method'), // GET or POST
            url: linkObj.attr('action'), // the file to call
            success: function(response) { // on success..
                $('#Modal-Content').html(response); // update the DIV
            }
        });
    });
});

MVC Bootstrap modal show validation result

1 Answers1