我想设置单击下拉列表时缺少的默认值。我希望无法选择“请选择”值

Question

I want to set default value which will miss when click on the dropdown list.I would like to be unable to select "Please select" value. When I click on "Please select" value in materialId or depotId, "" null value send by ajax and I am getting error. How can I prevent this?

Create.cshtml

  <div class="form-group">
        @Html.LabelFor(model => model.materialId, "Material names", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("materialId", null, "Please select", htmlAttributes: new { @class = "form-control chosen" })
            @Html.ValidationMessageFor(model => model.materialId, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.depotId, "Product Outlet", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("depotId", null, "Please select", htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.depotId, "", new { @class = "text-danger" })
        </div>
    </div>
    <script type="text/javascript">
            $(document).ready(function () {
                $('#depotId').change(function () { sendDataByAjax(); });
                $('#materialId').change(function () { sendDataByAjax(); });
        })
    function sendDataByAjax() {
        var materialId= $('#materialId option:selected').val();
        var depotId= $('#depotId option:selected').val();

        if (materialId == "" || depotId == "") {
          // I can not write this
        }
        $.ajax({
            type: "GET",
            url: "@Url.Action("GetStock", "OutgoingProduct")",
            data: {
                'materialId': materialId,
                'depotId': depotId
            },
            success: function (data) {
                $("#stock").html(data);
                }
        });
        }
    </script>
}

I am getting error here when "" goes to my controller. Because it is not int.

OutgoingProductController.cs

public string GetStock(string materialId, string depotId)
{
    int did = int.Parse(depotId);
    int mid = int.Parse(materialId);

Answer 1

Try returning false when materialId == "" || depotId == "" materialId == "" || depotId == "" :

function sendDataByAjax() {
        var materialId= $('#materialId option:selected').val();
        var depotId= $('#depotId option:selected').val();

        if (materialId == "" || depotId == "") {
          return false;
        }
        $.ajax({
            type: "GET",
            url: "@Url.Action("GetStock", "OutgoingProduct")",
            data: {
                'materialId': materialId,
                'depotId': depotId
            },
            success: function (data) {
                $("#stock").html(data);
                }
        });
}

Answer 2

Since your dropdownlist selected values are passed as numeric values, you may use parseInt() function to try parsing numeric value from client-side and then check against NaN , if the value is numeric then trigger AJAX callback:

function sendDataByAjax() {
    var materialId = parseInt($('#materialId option:selected').val());
    var depotId = parseInt($('#depotId option:selected').val());

    if (isNaN(materialId) || isNaN(depotId)) {
        // do something, e.g. alert user
        return false;
    }
    else {
        $.ajax({
            type: "GET",
            url: "@Url.Action("GetStock", "OutgoingProduct")",
            data: {
                'materialId': materialId,
                'depotId': depotId
            },
            success: function (data) {
                $("#stock").html(data);
            }
        });
    }
}

Then make sure that your action method contains int type for both parameters, hence no need to use int.Parse() which will throwing exception if parsed string has null value:

public ActionResult GetStock(int materialId, int depotId)
{
    int did = depotId;
    int mid = materialId;

    // other stuff
}

Answer 3

the way to solve this is not the way you're trying to do it. the way to do should be to use the validation system, available for MVC.

Change your get method to use a model, something like:

public class StockRequestModel
{
    [Required]    
    public int materialId { get; set }

    [Required]
    public int depoId { get;set; }
}

Your controller method can then become something like:

public string GetStock([FromUri] StockRequestModel model)
{
    if ( !ModelState.IsValid )
    {
         some code here
    } 

    //at this point your model is valid and you have IDs so can proceed with your code
}

Normally, in MVC you would return the original View with the state in the result, so you can then trigger the front end validation. In your case, you seem to have a WebAPI controller in an MVC app, but you can still use front end validation.

There are other questions related to yours, such as Client side validation with Angularjs and Server side validation with Asp.net MVC

Normally I'd vote to close it as duplicate, but in this case, I think it's worthwhile pointing out the issue and solution.

Another place to go would be https://angularjs.org/ and then check the Form Validation section for pure front end validation. Of course you'd want to keep both front end and back end validations.